Почему jQuery не позволяет мне анимировать фоновый цвет div?

Я нашел этот пример анимации на w3schools.com:Почему jQuery не позволяет мне анимировать фоновый цвет div?

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() 
    { 
    $("#btn1").click(function(){ 
    $("#box").animate({height:"300px"}); 
    }); 
    $("#btn2").click(function(){ 
    $("#box").animate({height:"100px"}); 
    }); 
}); 
</script> 
</head> 
<body> 

<button id="btn1">Animate height</button> 
<button id="btn2">Reset height</button> 
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> 
</div> 

</body> 
</html>

(This can be run here)

Однако, если я пытаюсь изменить это, чтобы оживить цвет фона вместо высоты, но он не работает , Вот мой код:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() 
    { 
    $("#btn1").click(function(){ 
    $("#box").animate({backgroundColor:"#0000ff"}); 
    }); 
    $("#btn2").click(function(){ 
    $("#box").animate({backgroundColor:"#98bf21"}); 
    }); 
}); 
</script> 
</head> 
<body> 

<button id="btn1">Animate height</button> 
<button id="btn2">Reset height</button> 
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> 
</div> 

</body> 
</html>

(This can be run here)

Этот учебник JQuery (http://jqueryui.com/animate/) создает впечатление, что это должно работать, поэтому там, где я буду неправильно? Благодаря!!

источник

2014-12-02 Christopher Shroba

Я была такая же проблема некоторое время назад ... Я закончил с использованием [этот плагин JQuery] (http://www.bitstorm.org/jquery/color-animation/). – Rafael

Правильно настройте jsFiddle и включите необходимые библиотеки: http://jsfiddle.net/rx2jzwmj/ –

Вам нужно включить плагин JQuery UI в вашем HTML для того, чтобы оживить цвета:

<head> 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
<!-- Other HTML --> 
</head>

Стилевые не является обязательным, но вам нужен файл JS. Кроме того, убедитесь, что вы включили модуль пользовательского интерфейса после самого jQuery.

See an updated JSFiddle.

источник

2014-12-02 01:44:43 apparatix

Небольшая ошибка, которую вы делаете:

Вы должны загрузить JQuery библиотеку щ для того, чтобы это работало. Добавьте это чуть ниже вашего включения основного jquery.

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

источник

2014-12-02 01:44:49 Todd

Почему downvote? это проблема. – Todd

jQuery, сам по себе, не обеспечивает анимацию значений цвета. Для этого вам нужен плагин. Есть несколько, включая , но не ограничиваясь ими, jQuery UI. Найдите «цветную анимацию jQuery», чтобы найти свои варианты. Вот тройку лидеров, как из этого письма:

источник

2014-12-02 01:47:09

полезно, хотя OP предположительно использует jquery ui для вещей, отличных от цветовой анимации. ** Я сделал это предположение. ** ЕСЛИ НЕ, это лучший ответ. – Todd

@Todd: Да, сложно сказать. С одной стороны, данный основной фрагмент не включает jQuery UI. С другой стороны, связанный учебник в этом вопросе касается пользовательского интерфейса jQuery. :-) Мое предположение похоже на многих, многих людей, они смущают jQuery и jQuery UI, что достаточно справедливо. –

плюс один $$$$$$ – Todd

Почему jQuery не позволяет мне анимировать фоновый цвет div?

ответ

Смежные вопросы