Постепенное появление Остановки jQuery / Постепенное исчезновение
Это - довольно легкое, но я, может казаться, не понимаю это.
В основном у меня есть парение jQuery, которое постепенно появляется отделение и постепенно исчезает другой на парение.
Когда я быстро толплюсь на, и от несколько раз этого пульсирует назад и вперед в течение приблизительно 3-4 секунд для окончания всех, что они исчезают в/исчезать outs.
Я обычно останавливаю эти вещи с .stop (), но это, кажется, не добивается цели здесь. Как я могу уничтожить исчезновение в том, если я толплюсь от кнопки перед an' $ (" .txtWrap") .stop () .hover (
$(".txtWrap").stop().hover(
function () {
$(this).find('.txtBock').fadeOut();
$(this).find('.txtDesc').fadeIn();
},
function () {
$(this).find('.txtBock').fadeIn();
$(this).find('.txtDesc').fadeOut();
}
)
2 ответа
Ваш stop () неуместен.
Попробуйте следующее:
$(".txtWrap").hover(
function () {
$(this).find('.txtBock').stop().fadeOut();
$(this).find('.txtDesc').fadeIn();
// $('#timeTxt').fadeOut();
// $('#timeTxtDesc').fadeIn();
},
function () {
$(this).find('.txtBock').fadeIn();
$(this).find('.txtDesc').stop().fadeOut();
}
)
РЕДАКТИРОВАТЬ:
Это будет анимировать непрозрачность элементов, не скрывая элемент. Если вы хотите, чтобы они были скрыты, используйте .hide () , вам нужно добавить обратный вызов к функции анимации.
$(".txtWrap").hover(
function () {
$(this).find('.txtBock').stop().animate({opacity:0}, 500);
$(this).find('.txtDesc').animate({opacity:1}, 500);
// $('#timeTxt').fadeOut();
// $('#timeTxtDesc').fadeIn();
},
function () {
$(this).find('.txtBock').animate({opacity:1}, 500);
$(this).find('.txtDesc').stop().animate({opacity:0}, 500);
}
)
В такие моменты я обращаюсь к гениальному плагину Брайана Черна .hoverIntent () - Это довольно гладко ... ждет, пока пользователь не замедлится достаточно перед выполнением. Вы можете настроить его под свои нужды.
Просто включите плагин (он достаточно короткий, я иногда помещаю его прямо в свой файл сценария), затем добавьте слово Intent :
$(".txtWrap").hoverIntent(
function () {
$(this).find('.txtBock').fadeOut();
$(this).find('.txtDesc').fadeIn();
},
function () {
$(this).find('.txtBock').fadeIn();
$(this).find('.txtDesc').fadeOut();
}
)