title: jQuery animation gets executed only once
body: <p>I have this function:</p>
  
  <pre><code>  function flipAndFade(elemToAnimate,overlay) {
        elemToAnimate.animate({ textIndent: 0 }, {
            step: function (go) {
                $(this).css('-moz-transform', 'rotateY(' + go + '360deg)');
                $(this).css('-webkit-transform', 'rotateY(' + go + '360deg)');
                $(this).css('-o-transform', 'rotateY(' + go + '360deg)');
                $(this).css('transform', 'rotateY(' + go + '360deg)');
  
                $(".overlay-bg").delay('600').fadeIn('slow', function () {
                    $(this).stop();
                });
                overlay.delay('600').fadeIn('slow', function () {
                    $(this).stop();
                });
  
                $(".overlay-bg").animate({ "top": 0 }, { duration: 1 });
                $(".overlay-bg").animate({ "left": 0 }, { duration: 1 });
                overlay.animate({ "top": 0 }, { duration: 1 });
                overlay.animate({ "left": 0 }, { duration: 1 });
            },
            duration: 1000,
            complete: function () {
                $(this).animate().stop();
            }
        });         
    }
  </code></pre>
  
  <p>And i have two elemnts listening for click:</p>
  
  <pre><code>$(".module3").click(function(){
      flipAndFade($(".module3"), $(".overlay3"));
  });
  $(".module4").click(function(){
      flipAndFade($(".module4"), $(".overlay4"));
  });
  </code></pre>
  
  <p>But the problem is when i click on the first element all works fine. But then clicking on the second element does not execute the animation. If I refresh and click on the second one, it works, but then the first one it does not. I read in the posts about function queuing, but i am not clear how to do that.</p>
  
  <p>Thanks in advance</p>