jQuery animation gets executed only once

Question

I have this function:

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

And i have two elemnts listening for click:

$(".module3").click(function(){
    flipAndFade($(".module3"), $(".overlay3"));
});
$(".module4").click(function(){
    flipAndFade($(".module4"), $(".overlay4"));
});

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.

Thanks in advance

Answer 1

If there are multiple instances of .module3 in your page, then you need to do this:

$(".module3").click(function(){
    flipAndFade($(this), $(".overlay3"));
});

And, only call this once as it will serve all your .module3 elements with this one block of code.

Or, if there's only one .module3 and one .module4 , then you can serve both with this and you really want to pass $(".module3") to both, then you can just combine the selectors and use one piece of code like this:

$(".module3, module4").click(function(){
    flipAndFade($(".module3"), $(".overlay3"));
});

---

If there is a different .overlay3 for each .module3 , then you will need to change the code further in order to specify which .overlay3 goes with which .module3 probably using $(this).find(some selector) , but I'd need to see the HTML that contains .overlay3 to know exactly what you need.

---

Then, I'd ask why are you calling $(this).animate().stop(); in the complete: handler? The animation should already be done right?

Answer 2

好像单击处理程序是用于同一选择器$(".module3")