Question

我正在做嵌套动画，如下面的顺序：

悬停在image1上
显示第1行
隐藏第1行
显示第2行
隐藏第2行
（第3 4 5行等）

如果我以受控方式悬停，我只会得到理想的行为。例如。如果我只悬停一次，我会得到上面提到的行为。

但是如果我快速地进/出很多次，我的行为会非常不一致。我在网上尝试了各种建议，但无法使其发挥作用。

我的期望是：即使我随机徘徊了很多次，如果“我只悬停一次并让动画完成”，我应该得到与之相同的行为。

请帮忙。我在挣扎。

HTML：

<div class="hover">
    Hover Me
</div>

<div class="item1">
  <div class="a">
      text for a
  </div>
  <div class="b">
      text for b
  </div>
  <div class="c">
      text for c
  </div>
  <div class="d">
      text for d
  </div>
</div>

CSS：

.hover {
    width: 100px;
    height: 60px;
    border: 1px solid red;
}


.item1 {
    margin:25px;
    width:600px;
    height:400px;
    border:10px solid green; 
}
.a, .c {
  clear: both;
  float:left;
  margin-top: 6%;
  margin-left: 35px;
  opacity:0.0;
  font-size:30px;
}

.b, .d {
  clear: both;
  float:right;
  margin-top: 6%;
  margin-right: 25px;
  opacity:0.0;
  font-size:30px;
}

jQuery的：

a = $(".a");
b = $(".b");
c = $(".c");
d = $(".d");


$(".hover").hover(
    function() {
      a.animate({opacity:1.0}, 2000, function()  {
        a.animate({opacity:0.0},3000, function() {
          b.animate({opacity:1.0},2000, function()  {
            b.animate({opacity:0.0}, 3000, function() {
              c.animate({opacity:1.0}, 2000, function()  {
                c.animate({opacity:0.0}, 3000, function() {
                  d.animate({opacity:1.0},2000, function()  {
                    d.animate({opacity:0.0}, 3000, function() {
      }); }); }); }); }); }); });
      }); 
    },
    function() {
        a.opacity(0);  //psuedcode
        b.opacity(0);
        c.opacity(0);
        d.opacity(0);
        a.stop(true, true);
        b.stop(true, true);
        c.stop(true, true);
        d.stop(true, true);
    }
);

Answer 1

你需要另外一张支票。类似于http://jsfiddle.net/z9Unk/120/。

基本上，我正在做以下事情：

// This is your fallback condition
stopAnimation = false;

$(".hover").hover(
    function() {
      stopAnimation = false;
      a.animate({opacity:1.0}, 2000, function()  {
        // check the stopAnimation value before running the next animation
        ! stopAnimation && a.animate({opacity:0.0},3000, function () { /* etc. */})
      })
    },
    function() {
        stopAnimation = true;
        a.stop(true, true);
        b.stop(true, true);
        c.stop(true, true);
        d.stop(true, true);
    }
);

您可能还想考虑在停止时将不透明度设置为0，除非您希望这些字词在您再次悬停之前挂起。

Answer 2

我不是百分之百确定你要做什么。我的意思是，我不知道你是否想要坚持100％的不透明度，但我认为我的代码会有所帮助。让我知道你想要达到的效果的更多细节，我会相应更新。

我的小提琴：http://jsfiddle.net/z9Unk/126/

代码：

$(".hover").hover(
    function() {
      a.fadeTo(2000, 1).fadeTo(3000, 0, function()  {
          b.fadeTo(2000, 1).fadeTo(3000, 0, function()  {
              c.fadeTo(2000, 1).fadeTo(3000, 0, function()  {
                  d.fadeTo(2000, 1).fadeTo(3000, 0)
              });
          });
      });
    },
    function() {
        $('.item1 > div').each(function(i, div) {
            $(div).stop(true).fadeTo(0, 0);
        });
    }
);

我之前也有停止检查，但我不确定你想要达到的效果。

编辑：我将代码更新为更紧凑，并将.hide()更改为.fadeTo(0, 0)，因此元素不会跳到页面上。

无法阻止使用jquery建立动画队列

2 个答案: