0

Jquery の助けを借りて、上からスライドするメニューを作成することに成功しました。タブ「メニュー」を押すと、メニューが入ったり下がったりし、メニューを離れるとスライドして戻ります。問題は、メニュー タブをすばやく 2 回押すと、2 倍のピクセル数が減少することです。また、メニューを離れると上がりますが、アニメーションがまだ進行している間に戻ってもう一度離れると、ピクセルも2倍になります。

これは私のコードです: CSS

#menu {
    position:absolute;
    left:0px;
    top:-203px;
    width: 100%;
    z-index:1;
}
#menucontentwrapper {
    background-color: #330066;
    width: 100%;
    height: 200px;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
    border-bottom: 3px solid #000000;
}
#menucontent {
    height: 200px;
    width: 820px;
    margin: 0 auto;
}
#menutabwrapper {
    width: 820px;
    height: 50px;
    margin: 0 auto;
}
#menutab {
    background-color: #330066;
    height: 30px;
    width: 100px;
    float: right;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
    border-bottom: 3px solid #000000;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
}

体

<div id="menu">
    <div id="menucontentwrapper">
        <div id="menucontent"></div>
    </div>
    <div id="menutabwrapper">
        <div id="menutab">MENU</div>
    </div>
</div>
<script>
$('#menutab').click(function() {
$('#menu').animate({
top: '+=203',
}, 1000, function() {
// Animation complete.
});
})
$('#menucontentwrapper').mouseleave(function() {
    $('#menu').animate({
        top: '-=203',
    }, 500, function() {
// Animation complete.
    });
})
</script>

これに対する解決策を知っている人はいますか？

前もって感謝します！

4

3 に答える 3

3

次の方法で実行できます。

var $menutab = $('#menutab');
var $menu = $('#menu');
$menutab.one('click', slideDown);//Initially register one click event to slideDown

function slideDown()
{
     $menu.animate({
        top: '+=203',
    }, 1000, function () {
        $('#menucontentwrapper').one('mouseleave', slideUp);// On completion of animation register one mouseleave event to slideUp
    });

}
function slideUp()
{
    $menu.animate({
        top: '-=203',
    }, 1000, function () {
        $menutab.one('click', slideDown);// On completion of animation register one click event to slideDown
    });

}

フィドル

このメソッドが機能するのは、イベント ハンドラーをアタッチするone代わりにを使用onすることで、アニメーションの実行中にどちらのイベントも処理されないようにするためです。これは、によってアタッチされたハンドラーoneが 1 回だけ実行され、その後削除されるためです。アニメーションが完了すると、適切なハンドラーがアニメーション関数の完了コールバックにアタッチされます。

.one()を参照してください

于 2013-06-27T02:46:21.423 に答える
2

jQueryのstop()メソッドを確認してください。

animate関数を呼び出す前に、 を呼び出しますstop。true パラメーターを使用すると、#menu の実行中のすべてのアニメーションが最後にジャンプします。意図的に複数のアニメーションを実行する可能性が低い場合は、queue パラメータの使用方法を確認する必要があります。

$('#menutab').click(function() {
    $('#menu').stop(true, true).animate({
        top: '0px',
    }, 1000, function() {
    // Animation complete.
    });
})
$('#menucontentwrapper').mouseleave(function() {
    $('#menu').stop(true, true).animate({
        top: '-203px',
    }, 500, function() {
// Animation complete.
    });
})
于 2013-06-27T02:46:30.197 に答える
0

要素がクリック関数のアニメーションの途中にあるかどうかを確認するためにチェックを実行する必要があります。

$('#menutab').click(function() {
    if( !$('#menu').is(':animated') ) {
        $('#menu').animate({
            top: '+=203',
        }, 1000, function() {
        // Animation complete.
        });
    }
})
于 2013-06-27T02:43:01.657 に答える