Хочу реализовать удаление и появления фотографий с использованием классов.
Делаю так
$('#cart img').addClass('animated zoomOut');
setTimeout(function(){$('#cart img').removeClass('animated zoomOut')}, 1000);
setTimeout(function(){$('#cart img').addClass('animated zoomIn')}, 500);
setTimeout(function(){$('#cart img').removeClass('animated zoomIn')}, 1000);
Почему то класс zoomin не добавляется. Почему?
А так?
$('#cart img').addClass('animated zoomOut');
setTimeout(function(){$('#cart img').removeClass('animated zoomOut')}, 1000);
setTimeout(function(){$('#cart img').addClass('animated zoomIn')}, 1000 + 500);
setTimeout(function(){$('#cart img').removeClass('animated zoomIn')}, 1000 + 500 + 1000);
Более грамотный, но сложный для понимания вариант:
$('#cart img').addClass('animated zoomOut');
setTimeout(
function() {
$('#cart img').removeClass('animated zoomOut');
setTimeout(
function() {
$('#cart img').addClass('animated zoomIn');
setTimeout(function() {
$('#cart img').removeClass('animated zoomIn');
},
1000);
}, 500);
}, 1000);
setTimeout не останавливает выполнение скрипта, а указывает, что функцию нужно будет запустить через n милисекунд (или что там). Поэтому, фактически, у Вас выполняется всё в таком порядке:
1. addClass('animated zoomOut') (сразу)
2. addClass('animated zoomIn') (через полсекунды)
3. removeClass('animated zoomOut') (еще через полсекунды)
4. removeClass('animated zoomIn') (сразу после предыдущего)
На счет последних двух не уверен, что раньше выполнится (3 или 4) - я не помню как там в javascript "складывается" выполнение setTimeout-ов - очередь там или стек. Обычно я просто не полагаюсь ни на такие явления.
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости