Блог

Главная - Вопросы по программированию - Почему animations и addClass ведут себя по-разному?

Почему animations и addClass ведут себя по-разному?

#jquery #jquery-animate

#jquery #jquery-анимировать

Вопрос:

У меня есть div, начальный цвет которого зеленый.

Я не понимаю, почему он сразу получает красный цвет **** ,

в то время как анимации в порядке в очереди.

The queue is fine and by order , но цвет сразу меняется.

Разве он не должен быть после второй анимации?

Есть ли разница между приоритетом анимации и addClass ?

 $("div").show("slow").animate({left:' =200'},2000).animate({top:' =200'},2000).css('background-color','red');

Комментарии:

1. Примечание: ваше либеральное использование форматирования текста затрудняет чтение вопроса. Когда почти все выделено жирным шрифтом, чтобы выглядеть важным, вам нужно выполнить дополнительный шаг в своей голове, чтобы игнорировать все форматирование, чтобы определить, что действительно важно в вопросе.

Ответ №1:

css Метод не помещает изменение в очередь анимации, поэтому оно изменяется сразу при запуске кода.

Вы можете поместить изменение CSS в очередь анимации, используя queue метод:

 $("div").show("slow")
.animate({left:' =200'},2000)
.animate({top:' =200'},2000)
.queue(function(){
  $(this).css('background-color','red');
});

Ответ №2:

css не является функцией очереди. Он выполняется немедленно. Вы можете выбирать между:

 $("div").show("slow").animate({left:' =200'},2000)
.animate({top:' =200'},2000, function(){ $(this).css('background-color','red'); });

и

 $("div").show("slow").animate({left:' =200'},2000).animate({top:' =200'},2000)
.queue(function(){ $(this).css('background-color','red'); });

Ответ №3:

 $("div")
    .animate({left:' =200', top:' =200', display: 'block'}, 2000, 
    function() {
       $(this).css('background-color','red');
    }
);

Извините за отступ.