У меня есть следующие элементы:
Плитка: allTile hotTile mmyTile
Разделы: allSec hotSec mmySec
Пример того, что я хочу сделать: если щелкнуть allTile, добавьте классы анимированные и bounceOut ко всем 3 разделам, чтобы их оживить. Затем удалите эти классы и добавьте hide-me, чтобы скрыть их. После того, как все они будут скрыты, тогда unhide allSec (поскольку allTile был выбранным фрагментом), удалив hide-me и отскочив его, добавив классы анимированные и bounceIn.
Проблема, с которой я сталкиваюсь: после первого window.setTimeout никакого кода не выполняется. Однако, если я положил его на консоль, он отлично работает. Но если я размещаю всю функцию в консоли, снова она не запускает код после этого window.setTimeout.
http://www.jsfiddle.net/met920/zt9eD Также должна быть ссылка CSS для Animate.css из daneden.github.io/animate.css
Альтернативно, здесь соответствующий код:
function(){
animationClick('#allTile');
animationClick('#hotTile');
animationClick('#mmyTile');
function animationClick(element){
clickedEl = $(element);
element = $(element.substring(0,4) + 'Sec');
clickedEl.click(
function(){
//bounce out everything
$(allSec).addClass('animated bounceOut');
$(hotSec).addClass('animated bounceOut');
$(mmySec).addClass('animated bounceOut');
//wait for animation to finish
//before removing classes and hiding them
window.setTimeout(function(){
$(allSec).removeClass('animated bounceOut');
$(hotSec).removeClass('animated bounceOut');
$(mmySec).removeClass('animated bounceOut');
$(allSec).addClass('hide-me');
$(hotSec).addClass('hide-me');
$(mmySec).addClass('hide-me');
}, 2000);
//bounce in the new one
element.removeClass('hide-me');
element.addClass('animated bounceIn');
window.setTimeout(function(){
element.removeClass('animated bounceIn');
}, 2000);
}
);
};
}
Я понял это. Проблема в том, что код после setTimeout происходит до истечения этого таймаута, и поскольку я добавляю и удаляю вещи, тег hide-me был "удален" до его добавления, сохраняя там тег в конце.
function(){
animationClick('#allTile');
animationClick('#hotTile');
animationClick('#mmyTile');
function animationClick(element){
clickedEl = $(element);
element = $(element.substring(0,4) + 'Sec');
clickedEl.click(
function(){
//bounce out everything
$(allSec).addClass('animated bounceOut');
$(hotSec).addClass('animated bounceOut');
$(mmySec).addClass('animated bounceOut');
//wait for animation to finish
//before removing classes and hiding them
setTimeout(function(){
$(allSec).removeClass('animated bounceOut');
$(hotSec).removeClass('animated bounceOut');
$(mmySec).removeClass('animated bounceOut');
$(allSec).addClass('hide-me');
$(hotSec).addClass('hide-me');
$(mmySec).addClass('hide-me');
element.removeClass('hide-me');
element.addClass('animated bounceIn');
setTimeout(function(){
element.removeClass('animated bounceIn');
}, 2000);
}, 1000);
}
);
};
}
попробуйте это:
function(){
animationClick('#allTile');
animationClick('#hotTile');
animationClick('#mmyTile');
function animationClick(element){
clickedEl = $(element);
element = $(element.substring(0,4) + 'Sec');
clickedEl.click(
function(){
//bounce out everything
$(allSec).addClass('animated bounceOut');
$(hotSec).addClass('animated bounceOut');
$(mmySec).addClass('animated bounceOut');
//wait for animation to finish
//before removing classes and hiding them
setTimeout(function(){
$(allSec).removeClass('animated bounceOut');
$(hotSec).removeClass('animated bounceOut');
$(mmySec).removeClass('animated bounceOut');
$(allSec).addClass('hide-me');
$(hotSec).addClass('hide-me');
$(mmySec).addClass('hide-me');
}, 2000);
//bounce in the new one
element.removeClass('hide-me');
element.addClass('animated bounceIn');
setTimeout(function(){
element.removeClass('animated bounceIn');
}, 2000);
}
);
};
}