Почему не работает анимация?

Question

[Максим Арон]

У меня не работает анимация, в чем может быть проблема?

var forAnim = $("#third");

$(document).ready(function() {
  forAnim.animate({'background': '#000000'}, 500);
});

Answer 1

[Никита]

На сколько я помню, animate у жиквери не умеет цвета анимировать, обычно используют плагин тык

Comments

[Максим Арон]

С плагином тоже не работает

[Максим Арон]

$(document).ready(function() {
$("#third");.animate({background-color: '#000000'}, 500);
});

[Максим Арон]

Вот исправленный вариант
$(document).ready(function() {
$('#third').animate({backgroundColor: '#000000'});
});

[Никита]

Эпик Прогер: а начальный цвет задан у блока? например пустой : transparent ? подключили ли вы жиквери ?)

[Максим Арон]

Не по этой теме но все же. В чем может быть проблема, если при одном скролле (100px) сразу делает анимацию
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 5600){
$('.links').animate({color: '#000'});
$('#headerDiv').animate({backgroundColor: 'rgba(0, 0, 0, 0.2)'}, 500);
}
else{
$('.links').animate({color: '#fff'});
$('#headerDiv').animate({backgroundColor: 'rgba(255, 255, 255, 0.2)'}, 500);
}
});
});

[Никита]

Эпик Прогер: если при первом скролле, то он в ветку элс попадает.

[Максим Арон]

Никита: $(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 500){
$('.links').animate({color: '#000'});
$('#headerDiv').animate({backgroundColor: 'rgba(255, 255, 255, 0.2)'});
} else{
$('.links').animate({color: '#fff'});
$('#headerDiv').animate({backgroundColor: 'rgba(0, 0, 0, 0.2)'});
}
});
});

все работает, но с большой задержкой. И не как не исправляется
Ты не знаешь?

[Никита]

Эпик Прогер: тут дело в том что на каждый скрол выполяются эти операции, а они тяжеленькие. Есть функция паттерн называется Debouncing, почитать тут https://habrahabr.ru/post/60957/, поможет нам не выполнять код много раз, тоесть у вас ситуация такая что на 100 пикселей скрола ваш код выполняется 100 раз. Debouncing поможет избежать этого

[Максим Арон]

Никита: знаю что очень глупые вопросы задаю, но я все атки не могу понять. как к моему коду применить функцию debounce. $('input').on('input', $.debounce(function(e){
// обрабатываем ввод текста только после того,
// как пользователь перестанет вводить текст на 300ms
}, 300)); Как мне подстроить под себя этот код? Я понимаючто обнаглел но вообще не врубаю как

[Никита]

Эпик Прогер: создайте функцию, условие запихните в нее, которое в скроле, и вызывайте ее $.debounce(ваша функция, 500);

[Максим Арон]

Никита: Все равно не работает

$(window).scroll(function() {
  function animating(){
    if ($(window).scrollTop() > 500){
      $('.links').animate({color: '#000'}, 75);
      $('#headerDiv').animate({backgroundColor: 'rgba(255, 255, 255, 0.2)'}, 75);
    } else{
      $('.links').animate({color: '#fff'}, 75);
      $('#headerDiv').animate({backgroundColor: 'rgba(0, 0, 0, 0.2)'}, 75);
    }
  }
  $.debounce(animating, 500);
});

[Максим Арон]

Никита: дело в ом что похоже что дело не в проверке на скролл, а в анимации если я поставлю вместо .animate .css то задержек нет

Answer 2

[Tom Nolane]

$(document).ready(function() {
var forAnim = $("#third");
  forAnim.animate({backgroundColor: '#000000'}, 500);
});

либо так:

$(document).ready(function() {
var forAnim = $("#third");
  forAnim.animate({'background-color': '#000000'}, 500);
});