How to set icon to flicker when clicked

Question

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:

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
  });

}

<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>

Answer 1

You put the fadeIn inside a function in the fadeOut (or the other way around). Here's a working version:

var isBlink = false,
  blink = function($this){
    $this.fadeOut( function(){ 
        $this.fadeIn();
        if (isBlink) blink($this);
    });
}

$("#AustraliaPinPoint").click( function(){
    isBlink = !isBlink;
    blink($(this));
});

Here's a jsfiddle:

https://jsfiddle.net/mckinleymedia/bz5nkbyq/

Answer 2

Here's a working mockup of something that works as I assume you want it - note, this is JUST the button part, and there's a piece of code that uses a setTimeout - as noted in the code, rather than using setTimeout, you would use the [complete] callback that jquery has for animation methods

$(function() {
  $(".nav").click(function() {
    var $curr = $(".nav.current"); // determine the previously selected button

    $curr.addClass('blinky'); // add the blinky class
    $curr.removeClass('current'); // remove any class associateed with current from previous selected button

    $(this).addClass('current'); // add any class associateed with current selection to the button that was just pressed

    function animationDone() {
      $curr.removeClass('blinky');
    }
    // do your animation of page content
    setTimeout(animationDone, 2500);
    // I use a setTimeout just for the delay - what you would do is use the "complete" callback of the jQuery animation method 
  });
});

.current {
  box-shadow:0 0 5px #00ff00;
}
.blinky {
  animation-duration: 100ms;
  animation-name: blinker;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
@keyframes blinker {
  0% {
    opacity:1.0;
  }
  100% {
    opacity:0.3;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="nav current">Link 1</button><br />
<button class="nav">Link 2</button><br />
<button class="nav">Link 3</button><br />
<button class="nav">Link 4</button><br />