Создание одноразового действия в событии зависания

У меня есть меню, которое я хотел бы показывать на полной ширине, когда страница загружается, а затем сокращается на несколько секунд. Я сделал это успешно, назначив setTimeout функции моей timer переменный:Создание одноразового действия в событии зависания

var timer = setTimeout(function() { 
     $('nav').animate({width: '100p'}, 600, 'swing'); 
}, 1500);

Я хотел бы также, чтобы оживить ширину моего DIV на событии парения следующим образом:

$('nav').hover(function() { 
    clearTimeout(timer); 
    $(this).stop().animate({width: '100'}, 400, 'swing'); 

}, function() { 
    $(this).stop().animate({width: '30"}, 400, 'swing'); 
});

Моих беспокойство - общая оптимизация. Очевидно, как только таймер будет завершен, он никогда не будет сброшен, но по существу пользователь будет называть это clearTimeout функцией каждый раз, когда они вставляют в этот div. Сначала я подумал использовать метод one(), но не хотел создавать совершенно новое действие за пределами события hover(), которое у меня установлено сейчас. Есть ли какое-нибудь обходное решение?

источник

2015-03-12 Carl Edwards

Если «тайм-аут» происходит только один раз, просто очистите его сразу после выполнения вызова «animate». – tymeJV

Причина, по которой у меня есть «clearTimeout» внутри события hover, была в том случае, если пользователь наводил курсор на меню до окончания таймера, он очищает timeOut и возвращается к тому, чтобы быть обычным событием наведения. Если бы я удалил таймаут из события наведения, он бы прыгнул. –

Я решил бы это с помощью css-решения. Обратите внимание, что с анимацией перехода были бы устаревшие проблемы с браузером.

nav{ 
    width:30px; 
} 
nav.initial-expand, nav:hover{ 
    width:100px; 
    -webkit-transition: width .4s; /* Safari */ 
    transition: width .4s; 
}

Удалить .initial-expand

var timer = setTimeout(function() { 
    $('nav').removeClass('.initial-expand') 
}, 1500);

Поскольку либо .initial-expand или :hover триггером расширенный взгляд, удаление класса не имеет значения, если они колебались.

Кроме того, я бы рекомендовал анимировать его вкл/выкл с использованием положения влево/вправо, а не в ширину, так как его сужение может вызвать странные обертывания текста.

источник

2015-03-12 20:17:37

Создание одноразового действия в событии зависания

ответ

Смежные вопросы