2

jQueryでアイコンをアニメーション化しました。最初のサイクルは良好ですが、次のサイクルに向けて再起動すると、全体が高速化されます。誰かが理由を知っていますか？

これが最善の方法かどうかはわかりませんが、他の方法はわかりません。
gif ではない理由は、アルファ透明度のためです。

例: http://jsbin.com/ESuGAXe/1/edit?js,output

jQuery:

jQuery(function() {
    var plusicon = jQuery('.icon.plus');
    animateIcon(plusicon, 3000);

    function animateIcon(plusicon, duration) {
        jQuery('.sprite1', plusicon).stop(true).animate({'opacity':0}, duration, function() {
            jQuery('.sprite2', plusicon).stop(true).animate({'opacity':0}, duration, function() {
                jQuery('.sprite3', plusicon).stop(true).animate({'opacity':0}, duration, function() {
                    animateIcon();
                });
                jQuery('.sprite1', plusicon).stop(true).animate({'opacity':1}, duration);
            });
            jQuery('.sprite3', plusicon).stop(true).animate({'opacity':1}, duration);
        });
        jQuery('.sprite2', plusicon).stop(true).animate({'opacity':1}, duration);
    }
});
4

1 に答える 1

5

最後のステップが完了したら、関数を呼び出してそれを繰り返しますが、今回は引数なし (したがって期間なし) で、内部のものを次のように変更します。

animateIcon(plusicon, duration);

この再帰は最終的にエラーを引き起こします。よりクリーンな方法は、次のように setInterval() でラップすることです。

function animateIcon(plusicon, duration) {
  jQuery('.sprite1', plusicon).stop(true).animate({'opacity':0}, duration, function() {
    jQuery('.sprite2', plusicon).stop(true).animate({'opacity':0}, duration, function() {
      jQuery('.sprite3', plusicon).stop(true).animate({'opacity':0}, duration);
      jQuery('.sprite1', plusicon).stop(true).animate({'opacity':1}, duration);
    });
    jQuery('.sprite3', plusicon).stop(true).animate({'opacity':1}, duration);
  });
  jQuery('.sprite2', plusicon).stop(true).animate({'opacity':1}, duration);
}

setInterval(function(){animateIcon(plusicon, 3000);}, 9000); /*enough time for all steps to complete*/
于 2013-09-13T08:29:11.347 に答える