2

我正在做如下序列的嵌套动画：

  • 悬停在 image1 上
  • 显示线 1
  • 隐藏第 1 行
  • 显示线 2
  • 隐藏第 2 行
  • （依此类推，第 3 4 5 行）

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

如果我确实以受控方式悬停，我只会得到所需的行为。例如。如果我只悬停一次，我会得到上述行为。

但是，如果我快速进出很多次，我会得到非常不一致的行为。我在网上尝试了各种建议，但无法奏效。

我的期望是：即使我随机悬停多次，我也应该得到与“我只悬停一次并让动画完成”时相同的行为。

请帮忙。我在挣扎。

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

2 回答 2

2

你将需要在那里再次办理登机手续。像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，除非您希望这些词在您再次悬停之前一直挂起。

于 2013-07-03T05:53:36.817 回答
1

我不是 100% 确定你想要做什么。我的意思是，我不知道你是否想坚持 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)以便元素不会在页面上跳转。

于 2013-07-03T06:20:26.097 回答