0

私は自分のサイトのナビゲーションシステムに取り組んでいます。親にカーソルを合わせたときにコンテンツを表示するという考え方です。

ただし、コンテンツをすばやくホバーすると、アニメーションが不完全になり、途中で停止します。

完全な動作とコードは、以下のデモリンクにあります。コードの変更に関する提案があれば役立ちます。

デモ：http：//jsfiddle.net/vaakash/yH9GE/

「2つの」矢印を同時にホバーすると（1つの矢印から別の矢印にすばやく移動）、停止して不完全になります

私が使用したコードは

$('.anpn-wrap').mouseenter(function(){           

    $wrap = $(this);
    $txt = $(this).find('.anpn-text');
    $cnt = $(this).find('.anpn-cnt');

    $txt.hide();
    $cnt.css({ 'opacity': 0, 'margin-top': '-50px', 'width': '200px' });
    $wrap.stop().animate({ 'width': $cnt.outerWidth() });
    $cnt.show().animate({ 'opacity': 1, 'margin': 0});

});

$('.anpn-wrap').mouseleave(function(){

    $wrap = $(this);
    $txt = $(this).find('.anpn-text');
    $cnt = $(this).find('.anpn-cnt');

    $cnt.show().stop().animate({ 'opacity': 0, 'margin-top': '-50px' }, function(){
        $cnt.hide();
        $wrap.stop().animate({ 'width': $txt.outerWidth() });
        $txt.fadeIn();
    });

});​

ここに画像の説明を入力してください

4

2 に答える 2

1

$wrap、$txtおよびをローカライズしないことにより$cnt、それらはグローバルになるため、以前の mouseleave アニメーションが終了する前にmousenter イベントが発生した場合、これらの変数は上書きされ、最初のアニメーションのコールバックは他のボタンの要素に対処します。

解決策は、両方のハンドラで$wrapと$txtwith$cntを宣言することです。var

これを試して：

$('.anpn-wrap').mouseenter(function() {
    var $wrap = $(this).stop();
    var $txt = $wrap.find('.anpn-text').hide();
    var $cnt = $wrap.find('.anpn-cnt').css({
        'opacity': 0,
        'margin-top': '-50px',
        'width': '200px'
    }).show().animate({
        'opacity': 1,
        'margin': 0
    });
    $wrap.animate({
        'width': $cnt.outerWidth()
    });
}).mouseleave(function() {
    var $wrap = $(this);
    var $txt = $wrap.find('.anpn-text');
    var $cnt = $wrap.find('.anpn-cnt').show().stop().animate({
        'opacity': 0,
        'margin-top': '-50px'
    }, function() {
        $cnt.hide();
        $wrap.stop().animate({
            'width': $txt.outerWidth()
        });
        $txt.fadeIn();
    });
});
于 2012-11-29T16:48:08.387 に答える
0

代わりに何が必要かはわかりませんが、引数を渡しstop()てアニメーションを強制的に完了することができます。

stop(true, true)

このバージョンを参照してください: http://jsfiddle.net/yH9GE/2/

于 2012-11-29T14:37:56.330 に答える