***Functionality:***
When User navigates from one page to another via interaction with the button, the side-icon from the first page will flicker/blink for quick succession, before the page transits to the next page. The page transition is animated such that the button will have 'drop' effect while the new page will slide and fade in while the old page will slide and fade out.

***What has been done:***

I have tried using the following: 

```
var isBlink = false;
var selectEffectInterval;
var selectEffectCounter = 0;

if (isBlink) {
  isBlink = false;

  if (selectEffectCounter == 5) {
    selectEffectCounter = 0;
    clearInterval(selectEffectInterval);
  }
} else {
  $('#NewZealandPinPoint').fadeIn();
  $('#NewZealandPinPoint').fadeOut();
  isBlink = true;
  selectEffectCounter++;
}

```

***Issue:***

During page transition, I am not able to see the effect. Hence, I would like to ask how is it possible for me to set the side-icon to flicker/blink when the button is interacted by the user

***Code:***

```js
var isBlink = false;
var selectEffectInterval;
var selectEffectCounter = 0;

function Australia() {
  console.log("Australia");

  $('#Australia').toggle("drop", {
    duration: slideDuration
  }, {
    easing: 'easeInOutQuart',
    queue: false
  });
  $('#NewZealandPinPoint').hide();

  if (isBlink) {
    isBlink = false;

    if (selectEffectCounter == 5) {
      selectEffectCounter = 0;
      clearInterval(selectEffectInterval);
    }
  } else {
    $('#NewZealandPinPoint').fadeIn();
    $('#NewZealandPinPoint').fadeOut();
    isBlink = true;
    selectEffectCounter++;
  }

  $('#Oceania_Page').fadeOut({
    duration: slideDuration,
    queue: false
  });
  $('#Oceania_Page').animate({
    'left': '1921px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });

  $('#Australia_Page').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#Australia_Page').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });

}
```

```html
<div id="Oceania_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=5; top:0px; left:1921px; ">
  <img src="lib/img/Country/Oceania/Background.png" />

  <!--Countries-->
  <img id="AustraliaPinPoint" src="lib/img/Country/Oceania/AustraliaPinPoint.png" />
  <button id="Australia" onclick="Australia()">
    <img src="lib/img/Country/Oceania/Country/Australia.png">
  </button>

  <button id="PageBack" onclick="PreviousPage()">
    <img src="lib/img/VideoBackButton.png">
  </button>
</div>

<div id="Australia_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:1921px; ">
  <img src="lib/im/FootprintsBackground.png" />

  <button id="PageBack" onclick="Page()">
    <img src="lib/img/VideoBackButton.png">
  </button>
</div>
```