1

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

Делаю так

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

1

2 ответа 2

2

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

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

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

3
  • Вопрос в то что после удаления класса setTimeout(function(){$('#cart img').removeClass('animated zoomOut')}, 1000); он не устанавливает класс setTimeout(function(){$('#cart img').addClass('animated zoomIn')}, 500);
    – duddeniska
    24 окт 2017 в 6:53
  • Я же и пишу, в каком порядке у Вас в самом деле происходит. В принципе некорректно в этом случае говорить, что он "не устанавливает zoomIn после remove zoomOut", потому что установка zoomIn происходит до того как Вы делаете "remove zoomOut". 24 окт 2017 в 6:57
  • @duddeniska, вот представьте, Вы в макдаке стоите, Вас 4 человека одновременно заказали бургер, каждому из Вас сказали, что он будет через 5 минут. Когда он будет у вас всех? Правильно, через 5 минут у каждого, у всех одновременно (с небольшой погрешностью). Также и с setTimeout. 24 окт 2017 в 7:00
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);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.