4

こんにちは、私は jQuery を初めて使用し、一定時間後にナビゲーション メニューをページの上部からスライドさせたいと考えています。おそらく、ユーザーがページにいる時間は約 3/4 秒です。メニューがページから滑り落ちた後、メニューを下に移動する矢印ボタンを追加する予定ですが、当面は上下にスライドする方法を知る必要があります。これも機能させるには、CSSを修正する必要があると思います。

渡されたヒントの助けは大歓迎です。

詳細については、jsFiddle を参照してください: http://jsfiddle.net/headex/tJNXD/

4

2 に答える 2

2

私はこれをそのようにします：

まず、ここでは $(nav)セレクターを使用しますが、最初にコードに適応させることができます。また、メニューを配置する必要があります:position: relative;またはposition: absolute;

スライドさせるには：

$(nav).animate({"top":$(nav).height() * -1},"slow");

スライドさせるには：

$(nav).animate({"top":0},"slow");

3 秒後にポップアウトする場合は、次のようにします。

function MenuOut()
{
     /* The sample code I put on top */
     $(nav).animate({"top":$(nav).height() * -1},"slow");
}

これを Js ページに配置します。

/* This will run once the document is ready */
$(function()
{
    setTimeout("MenuOut",3000); /* 3000 represent 3000 milliseconds, so 3 seconds */
});

今ボタン：

function MenuIn()
{
    $(nav).animate({"top":0},"slow");
}

次のようにボタンにバインドします。

$('#theButton').on(
{
    click: function()
    {   
        /* Hide the button, and then show up the menu */
        $(this).animate({"top":$(this).height() * -1},"slow",function()
        {
            /* I putted this in a callback function, so the 2 animations will be one after the other, not at the same time ! */
            MenuIn();
        });
    }
});
于 2012-05-19T14:55:16.397 に答える
0

まず第一に、ロードした jsfiddle リンクでは、Mootools をロードしていた jquery をロードしていませんでした。使用したいのは jQuery ですよね？

もしそうなら、あなたはこのようなものを使うことができます...

var timeout = null;

$('#masterNav').hover(function() {
    clearTimeout(timeout);
}, function() {
    timeout = setTimeout('$("#nav").slideUp(500)', 750);
});
于 2012-05-19T15:15:56.297 に答える