Изменение цвета фона с помощью jquery animate

У меня есть следующий HTML-код: `

<html> 
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      backgroundColor: '#f5f5f5',
    });
  });
});
</script> 
</head>

<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>`

Но я не могу изменить цвет фона, как было упомянуто с помощью анимации.
Пожалуйста, дайте мне знать, что не так?

Спасибо
Smitha

Источник

2 ответа

Для поддержки изменения цвета фона необходимо включить библиотеки цветов jQuery UI или jQuery.

Из документов

Например, width, height или left могут быть анимированными, но background-color не может быть, если не используется плагин jQuery.Color()

$(document).ready(function () {
    $("button").click(function () {
        $("div").animate({
            backgroundColor: 'red',
        });
    });
});

Демо: jQuery UI
Демо: JQuery Color

Так добавь

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>
Источник

У меня была та же проблема, и оказалось, что было более эффективно использовать классы добавления / удаления с JS и добавлять CSS3-переход внутри них, чтобы получить мой цветной переход:

CSS
.firstColor{
background-color: #000000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.secondColor{
background-color: #FFFFFF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

JS

if (your condition) {
    $("#yourID").removeClass('secondColor').addClass('firstColor');
}
else{
    $("#yourID").removeClass('firstColor').addClass('secondColor');
}

Надеюсь, поможет:)

Источник
Другие вопросы по тегам