JQuery Таймер Слайд-функция

Question

Прямо сейчас у меня есть div, который скользит справа налево, а затем обратно обратно на свое первоначальное место. Но в целом не совсем так, как я хочу, чтобы это работало. Моя главная цель: чтобы пользователь наводил курсор на основной блок, который затем вытаскивал скользящий элемент. Часть, которая усложняется, заключается в следующем: если пользователь забывает сдвинуть погружение назад, я хочу дать ему временные рамки, которые приведут к его автоматическому закрытию по истечении определенного времени. Вот мой рабочий код: jsfiddle.net / eMsQr / 14 / .

Моя функция JavaScript:

$(document).ready(function() {
  $("#arrow").hover(
    function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    },
    function(){}
  );
});


$("#arrow").click(function(e){
    $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

Answer 1

Попробуйте это: http://jsfiddle.net/vansimke/cJ5pf/

Я подключился к событию mouseleave и добавил setTimeout. Вам может понадобиться перехватить тайм-аут, если вам потребуется отменить его позже (т. Е. Они повторно введут стрелку)

Answer 2

Вот пример jsFiddle , который устанавливает 3-секундную задержку с помощью функции setTimeout .:

JQuery

var cto;
$("#arrow").hover(
function() {
    clearTimeout(cto);
    $("#inner").stop().animate({
        marginRight: "0px",
        opacity: "1px",
        height: "100px"
    }, 500);
}, function() {
    cto = setTimeout(function(){$('#arrow').trigger('click')}, 3000);
});


$("#arrow").click(function(e) {
    $("#inner").stop().animate({
        marginRight: "-100px",
        opacity: "1px",
        height: "100px"
    }, 500);
});​

Обратите внимание, что если пользователь уберет свою мышь, а затем вернет ее в div, окно снова останется открытым до тех пор, пока в этот момент не начнется 3-секундный таймер обратного отсчета.

Answer 3

Вам нужно использовать setTimeout(), чтобы установить задержку закрытия деления.Вам также необходимо использовать clearTimeout() в функции открытия, чтобы остановить автоматическое закрытие, если кто-то отключил, а затем снова:

var timeout;
$("#arrow").hover(
    function() {
        clearTimeout(timeout); // clear the timer which will close the div, as we now want it open
        $("#inner").stop().animate({
            marginRight: "0px",
            opacity: "1px",
            height: "100px"
        }, 500);
    }, function() {
        timeout = setTimeout(function() {
            $("#inner").stop().animate({
                marginRight: "-100px",
                opacity: "1px",
                height: "100px"
            }, 500);                
        }, 1000); // close the open div 1 second after mouseout.
    }
);

Пример скрипта

Answer 4

см. Скрипку здесь: http://jsfiddle.net/eMsQr/51/

он использует mouseleave jquery, а также delay. Измените значение задержки, чтобы получить желаемое время.

$("#arrow").mouseleave(function(){   
    $("#inner").stop().delay(500).animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

Answer 5

Внутри функции наведения можно добавить дополнительную строку для запуска события щелчка, используя следующую строку:

setTimeout(function() { $("#arrow").trigger('click'); }, 5000);

5000 - это количество миллисекунд ожидания до нажатия кнопки.

Answer 6

Вам необходимо убедиться, что вы используете второй function() в методе hover jQuery.

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

Вот обновленный jsFiddle .