Jquery Объединить SlideUp/Down и по клику

Я создал два сценария, в одном из которых есть команды скольжения вверх и вниз, которые работают по таймеру при загрузке страницы. Второе — это событие щелчка, при котором выполняется команда скольжения вверх/вниз при нажатии на ссылку. Оба эти скрипта работают по отдельности, но я не могу заставить их работать вместе.

Вот скрипт скольжения вверх/вниз по времени:

$(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");
        }
    });
};

Как это должно работать, так это то, что когда страница загружается, окно скользит вниз через несколько секунд, а затем, если окно не используется, оно скользит вверх через несколько секунд. В этот момент можно щелкнуть ссылку, чтобы поле сдвинулось вверх или вниз в зависимости от его текущего положения.

Любая помощь в том, чтобы заставить эти два работать в комбинации, очень ценится :)


jquery onclick slide
person Paul    schedule 26.06.2013    source источник

Ответы (4)


arrow_upward
6
arrow_downward

Вы можете использовать функции тайм-аута, например:

Рабочий пример

$(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);
        }
    });
});
person apaul    schedule 03.07.2013
comment
Спасибо за отзыв, но, похоже, он не работает должным образом. При нажатии на ссылку поле скользит вниз и обратно вверх, я обнаружил, что это также происходит в вашем примере, если вы поиграете с ним в течение минуты. - person Paul; 04.07.2013
comment
@Paul, вы хотели, чтобы div снова скользил вверх через определенное время после щелчка? или вы искали что-то подобное - jsfiddle.net/apaul34208/SW6Mv/3 - person apaul; 04.07.2013

arrow_upward
1
arrow_downward

использовать функцию обратного вызова -

$('.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");
    }
});
person Mohammad Adil    schedule 26.06.2013
comment
Спасибо за ваш ответ. Но это, кажется, альтернативный сценарий слайда времени, он не включает событие щелчка. - person Paul; 26.06.2013
comment
Спасибо за обновления. Новый сценарий разрешает событие щелчка, но останавливает функционирование события по времени. Вот я и хожу по кругу :( - person Paul; 26.06.2013

arrow_upward
1
arrow_downward

Вы пробовали .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/

person pete    schedule 04.07.2013
comment
Спасибо. Я пробовал этот сценарий, однако при нажатии на ссылку, чтобы поле скользило вверх, оно прыгает в скрытое положение, а затем снова скользит вниз (как будто это поле в настоящее время скрыто). Я скопировал ваш код и не уверен, когда это происходит: S - person Paul; 04.07.2013
comment
Это происходит в скрипке или когда вы пытались интегрировать ее в свой код? - person pete; 04.07.2013

arrow_upward
0
arrow_downward

Попробуйте этот простой код для переключения

    <div class="panel">
            <br />
            <br />
            <p>The panel text or login and registraion form goes here....</p>
            <p>sanwebcorner.com</p>
            </div>
            <p class="slide"><a href="#" class="pull-me">Slide Up/Down</a></p>



$(document).ready(function() {
    $('.pull-me').click(function() {
        $('.panel').slideToggle('slow');
    });
});

Демонстрационная ссылка

person M. Lak    schedule 11.01.2017