1

わかりましたので、複数のアニメーションを発生させようとしています。onmouseenter には、finish(); を使用するバウンス効果があります。マウスアウトとオンクリックの移動位置の問題は、クリックしてからマウスをdivから移動すると、クリックアニメーションが終了します。変数、.data、その他のさまざまな方法を使用してみましたが、惨めに失敗し、簡単な方法を探しています解決。

これがjsfiddleです：http://jsfiddle.net/FR5Lu/

ここにコードがあります

$.fx.speeds._default = 1000;

$.fn.StartBounce = function() {
    var self = this; 
    (function runEffect() {
        self.effect('bounce', {distance:20}, 5000, runEffect);
    }) ();
    return this;
};

$('.iconeffect').mouseenter(function() {
            if (!$(this).is(":animated") ) {
    $(this).stop().StartBounce();
            }
});

$('.iconeffect').mouseout(function() {
    $(this).finish();
})

$('#effect1').click(function() {
    if( $("#desc1").is(":hidden") ) {
        bounced = false;
        $(this).finish();
        $(this).stop(true, true).animate({ left: -50});
        $('#effect2, #effect3').stop(true, true).animate({ left: 1000});
        $('#desc1').show( "blind", 1000);
    } else {        
        $(this).finish();
        $(this).stop(true, true).animate({ left: 0});
        $('#effect2, #effect3').stop(true, true).animate({ left: 0});
        $('#desc1').hide( "blind", 1000);
    }
});
4

1 に答える 1

0

onclick アニメーションにカスタム キューを使用して、finish()on mouseout への呼び出しの影響を受けないようにすることができます。またfinish()、本質的に同じでstop(true,true);あるため、クリック機能で両方を必要としません。

$('#effect1').click(function() {
    if( $("#desc1").is(":hidden") ) {
        $(this).finish().animate({ left: -50},{queue:'show'}).dequeue('show');
        $('#effect2, #effect3').stop(true, true).animate({ left: 1000});
        $('#desc1').show( "blind", 1000);
    } else {        
        $(this).finish().animate({ left: 0},{queue:'show'}).dequeue('show');
        $('#effect2, #effect3').stop(true, true).animate({ left: 0});
        $('#desc1').hide( "blind", 1000);
    }
});

これが更新されたフィドルです

カスタム キューを使用する場合はdequeue()、アニメーションを開始するために明示的に呼び出す必要があることに注意してください。

于 2013-09-14T06:38:59.253 に答える