4

2 つのスクリプトを作成しました。1 つは、ページの読み込み時にタイマーで動作するスライド アップおよびスライド ダウン コマンドです。2 つ目は、リンクがクリックされたときにスライドアップ/ダウン コマンドが実行されるクリック イベントです。これらのスクリプトは両方とも別々に動作しますが、一緒に動作させることはできません。

タイミングを合わせたスライドアップ/ダウン スクリプトは次のとおりです。

$(document).ready(function() {
    $('.slide-out-div').hide();
    $('.slide-out-div')
        .delay(5000)
        .slideDown(300);
    $('.slide-out-div')
        .delay(5000)
        .slideUp(500);
});

クリックスクリプトは次のとおりです。

window.onload = function() {
    $(document).('#clickme').click(function () {
        if ($('.slide-out-div').is(":hidden")) {
            $('.slide-out-div').slideDown("slow");
        } else {
            $('.slide-out-div').slideUp("slow");
        }
    });
};

これがどのように機能するかは、ページが読み込まれると数秒後にボックスが下にスライドし、ボックスが使用されていない場合は数秒後に上にスライドすることです。この時点で、リンクをクリックして、現在の位置に応じてボックスを上下にスライドさせることができます。

これら2つを組み合わせて動作させるための助けがあれば大歓迎です:)

4

4 に答える 4

6

次のようなタイムアウト関数を使用できます。

実施例

$(document).ready(function () {
    var timer;
    $('.slide-out-div').slideDown('slow', function () {
        timer = setTimeout(function () {
            $('.slide-out-div').slideUp("slow");
        }, 5000);
    });
    $('#clickme').click(function () {
        if ($('.slide-out-div').is(":hidden")) {
            $('.slide-out-div').slideDown('slow', function () {
                timer = setTimeout(function () {
                    $('.slide-out-div').slideUp("slow");
                }, 5000);
            });
        } else {
            $('.slide-out-div').slideUp('slow');
            clearTimeout(timer);
        }
    });
});
于 2013-07-03T16:22:07.830 に答える
1

コールバック関数を使用 -

$('.slide-out-div')
    .delay(5000)
    .slideDown(300, function () {
    $('.slide-out-div')        // execute when slideDown is complete
        .delay(5000)
        .slideUp(500);
});

$('#clickme').click(function () {
    if ($('.slide-out-div').is(":hidden")) {
        $('.slide-out-div').end().slideDown("slow");
    } else {
        $('.slide-out-div').end().slideUp("slow");
    }
});
于 2013-06-26T09:22:57.850 に答える
1

試しました.clearQueue()か？

$(document).ready(function () {
    var slideOut = $('.slide-out-div'), //cache DOM lookup
        tease = function () { //functionize this, in case you want to re-use it
            slideOut.slideDown(300);
            slideOut.delay(5000).slideUp(500);
        };
    $('#clickme').click(function (e) {
        /*
         * clearQueue() clears the [default] animation queue
         * so the slide-out div will behave correctly
         * if #clickme is clicked while tease() is running.
         */
        if (slideOut.is(":hidden")) {
            slideOut.clearQueue().slideDown("slow");
        } else {
            slideOut.clearQueue().slideUp("slow");
        }
        e.preventDefault();
        return false;
    });
    tease(); //tease with the slide-out
});

実際のデモ: http://jsfiddle.net/y5vGR/

于 2013-07-04T02:54:58.517 に答える