Если мышь больше 2 секунд, а затем показать еще нет?

Вот слайд-функция jQuery, которую я применил к div на hover, чтобы сдвинуть кнопку вниз.

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

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

Как мне изменить функцию для запуска слайда вниз, только если пользователь находится на div более секунды или два?

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script>
<script type="text/javascript">

$("#NewsStrip").hover(
function () {
    $("#SeeAllEvents").slideDown('slow');    },
function () {
    $("#SeeAllEvents").slideUp('slow');
});

</script>

Ответ 1

Вам нужно установить таймер при наведении курсора мыши и очистить его либо при включении слайда, либо в режиме мыши, в зависимости от того, что наступит раньше:

var timeoutId;
$("#NewsStrip").hover(function() {
    if (!timeoutId) {
        timeoutId = window.setTimeout(function() {
            timeoutId = null; // EDIT: added this line
            $("#SeeAllEvents").slideDown('slow');
       }, 2000);
    }
},
function () {
    if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;
    }
    else {
       $("#SeeAllEvents").slideUp('slow');
    }
});

Смотрите в действии.

Ответ 2

var time_id;

$("#NewsStrip").hover(
function () {
    if (time_id) {
        clearTimeout(time_id);
    } 
    time_id = setTimeout(function () {
        $("#SeeAllEvents").stop(true, true).slideDown('slow');
    }, 2000);
}, function () {
    if (time_id) {
        clearTimeout(time_id);
    } 
    time_id = setTimeout(function () {
        $("#SeeAllEvents").stop(true, true).slideUp('slow');
    }, 2000);
});