0

だから私はページの上にメニューボタンを持っていて、それはcss：hoverで少しホバーアニメーションをします。

$('.menu_button').click(function () {
                $(this).animate({
                    top: '-=50'
                }, 250);
                $('nav').delay(250).animate({
                    top: '+=50'
                }, 250);
                $('nav').mouseleave(function () {
                    $(this).delay(750).animate({
                        top: '-=50'
                    }, 250);
                    $('.menu_button').delay(1000).animate({
                        top: '+=50'
                    }, 250);
                });
            });

クリックすると、メニュー ボタンが上にスライドし、フィドルのようにメニューが下にスライドします。マウスを離すと、アニメーションは 750 ミリ秒後に逆方向に進みます。

しかし、2 ～ 3 回再生すると、メニュー ボタンが元の位置よりもはるかに下にスライドします。上から消えてしまうこともあります。なぜ、いつこれが起こるのかは言えません。クリックしなかったが、divの内側の上部のすぐ上にあるときに、グリッチを複製できます。

何かアイデアや提案が間違っていますか?

フィドル: http://jsfiddle.net/dennym/c5D22/

よろしくデニム

4

1 に答える 1

0

Move the nav animation into an anonymous callback function and set the top property to absolute values with px units:

$('.menu_button').click(function () {
    $(this).animate({
        top: '-50px'
    }, 250, function () {
        $('nav').animate({
            top: '50px'
        }, 250);
    });
});

$('nav').mouseleave(function () {
    $(this).delay(750).animate({
        top: '-50px'
    }, 250);
    $('.menu_button').delay(1000).animate({
        top: '-10px'
    }, 250);
});

Working example: http://jsfiddle.net/c5D22/4/

于 2013-04-04T16:28:08.803 に答える