Не добавляется класс после удаления jquery

325
26 октября 2017, 09:22

Хочу реализовать удаление и появления фотографий с использованием классов.

Делаю так

$('#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 не добавляется. Почему?

Answer 1

А так?

$('#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);
Answer 2

setTimeout не останавливает выполнение скрипта, а указывает, что функцию нужно будет запустить через n милисекунд (или что там). Поэтому, фактически, у Вас выполняется всё в таком порядке:

1. addClass('animated zoomOut') (сразу)
2. addClass('animated zoomIn') (через полсекунды)
3. removeClass('animated zoomOut') (еще через полсекунды)
4. removeClass('animated zoomIn') (сразу после предыдущего)

На счет последних двух не уверен, что раньше выполнится (3 или 4) - я не помню как там в javascript "складывается" выполнение setTimeout-ов - очередь там или стек. Обычно я просто не полагаюсь ни на такие явления.

READ ALSO
prepend переворачивает результат

prepend переворачивает результат

Делаю цикл, обрабатывая json массив, получаю в итоге переменную с кучей option которые нужно вставить в начало select, делаю prepend и он вставляет их перевернутымиПробовал...

193
jquery активный chekbox

jquery активный chekbox

есть чекбоксы установленные на фильтр, мне нужна проверка если отмечен хоть один чекбокс , то скрыть определенный блокЯ отмечаю чекбокс,...

289
Оптимизация изображений в галерее

Оптимизация изображений в галерее

Доброго времени суток :)

189
Сверстать таблицу при помощи div

Сверстать таблицу при помощи div

Сделать предоставленную таблицу блочными элементами , с применением свойства CSS display: table | table-row | table-cell

267