Комбинирайте 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
Благодаря за актуализацията. Новият скрипт позволява събитието click, но спира функционирането на събитието с време. Това е мястото, където се въртях в кръг :( - 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="/bg#" 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