title: function not executing for the second time after onclick
body: <p>An animation that is supposed to work in the 3rd slide of a JQuery slider is working fine the first time but not the second and consecutive times. The animation is tied in with the next button of the slider. Clicking the next button removes the "show" attribute from the current slide and adds the "show" attribute to the next slide. I have tried for days to debug this by researching similar scenarios and trying out different solutions but sofar it's a no go. Can anyone help? </p>
  
  <pre><code>function dog(){
      var dog = document.getElementById('dog_2');
      TweenMax.to(dog, 2, {left:"325px", repeat:2, yoyo:true});
  }
  
  function moveRight() {
      $('#slider ul').animate({
          left: - slideWidth
      }, 300, function () {
          $('#slider ul li:first-child').appendTo('#slider ul');
          $('#slider ul').css('left', '');
      });
  };
  
  $('#slider').on('click', 'a.control_next', function (){
      moveRight();
  
      if($("li").next().length &gt; 0){
          var next = $("#slider .slideshow .show").removeClass("show").next("li");
          next.addClass("show");
      } 
  
      else if  {
          $("li:last").removeClass("show");
          $("li:first").addClass("show");
      }
  
      if ($("li").eq(2).hasClass("show")){
          dog();
      };
  });
  </code></pre>