Question

我有这个功能：

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

我有两个元素在听点击：

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

但问题是当我点击第一个元素时一切正常。但是然后单击第二个元素不会执行动画。如果我刷新并点击第二个，它可以工作，但是第一个它没有。我在关于功能排队的帖子中读到了，但我不清楚如何做到这一点。

提前致谢

Answer 1

如果您的网页中有多个.module3个实例，那么您需要这样做：

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

而且，只调用一次，因为它将使用这一段代码为所有.module3元素提供服务。

或者，如果只有一个.module3和一个.module4，那么您可以同时使用此功能，并且您真的希望将$(".module3")传递给两者，那么您可以组合选择器并使用这样的一段代码：

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

如果每个.overlay3都有不同的.module3，那么您需要进一步更改代码，以便指定哪个.overlay3可能会使用哪个.module3 $(this).find(some selector)，但我需要查看包含.overlay3的HTML，以确切了解您的需求。

然后，我问你为什么要在$(this).animate().stop();处理程序中调用complete:？动画应该已经完成了吗？

Answer 2

似乎点击处理程序适用于同一个选择器$(".module3")

jQuery动画只执行一次

2 个答案: