2

次のシーケンスのようにネストされたアニメーションを実行しています:

  • image1 にカーソルを合わせると
  • 表示行 1
  • 行 1 を非表示
  • 表示行 2
  • 行 2 を非表示
  • (3 4 5 行目も同様)

私のフィドル: http://jsfiddle.net/z9Unk/119/

制御された方法でホバリングした場合にのみ、目的の動作が得られます。たとえば。1 回だけホバーすると、上記のような動作になります。

しかし、ホバーイン/アウトを何度も速くすると、非常に一貫性のない動作になります。ウェブ上でさまざまな提案を試みましたが、うまくいきませんでした。

私の期待は次のとおりです。ランダムに何度もホバーしても、「1回だけホバーしてアニメーションを完了させる」場合と同じ動作が得られるはずです。

助けてください。私は苦労しています。

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 に答える