3

別のアニメーションへのコールバックとしてアニメーションをトリガーしようとしています。問題は、最初のアニメーションが完了した場合にのみ 2 番目のアニメーションを起動したいということです。私が読んだことから、.stop() 関数がどのように動作するはずなのかがわかりました。ただし、コンパイルしたコードでは、最初のアニメーションが完了していなくても、2 番目のアニメーションが発生します。

コードは次のとおりです。

$(document).ready(function(){
    var angle = 0;

    function arrowRotate() {
        angle +=180;
        $('#arrow img').stop().rotate({
            animateTo: angle,
        }, 100);
    };

    function ToggleOpen(heightValue) {
        $('#information').stop().animate({
            height : heightValue,
        }, 1500, 'easeOutExpo', function(){
            arrowRotate();
        })
    };

    $('#information_container').hover(function(){
        ToggleOpen(500);

    }, function(){
        ToggleOpen(0);
    });

    $('#arrow img').click(function(){
        ToggleOpen(0);
    });

});

このサードパーティのプラグインを使用しています: http://code.google.com/p/jqueryrotate/

これが実際の実装です: http://hopeandpurpose.org

したがって、基本的に私が達成しようとしているのは、ホバー時に div の高さを上げることです。それが完了すると、画像が回転します。問題は、高さのアニメーションが完了せず、div アニメーションが 0 に戻っても、画像が回転することです。

今コードを見ていると、おそらく私の問題は、ホバーオフすると、arrowRotate() 関数がトリガーされることだと思われます。arrowRotate() 関数をラップする if 関数が私の最善の解決策でしょうか?

4

1 に答える 1

3

アニメーションを停止するために使用stop(true)し、要素での実行を待機しているキューに入れられたアニメーションをクリアします。

これが例です。stop(true)高さが縮小する前にマウスを離すと、mouseleave ハンドラーでクリアされるため、アニメーションが実行されないことがわかります。

$("div").hover(function() {
    $(this).stop(true).animate({ width: 300 }, function() {
      $(this).animate({ height: 50 });
    });
  }, function() {
    $(this).stop(true).animate({ width: 50, height: 100 });
  }
);
#test {
  width: 50px;
  height: 100px;
  background-color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">Test</div>

于 2012-04-30T12:37:57.060 に答える