Изменение фона цвета с помощью Jquery одушевленные

У меня есть следующий HTML-код: `Изменение фона цвета с помощью Jquery одушевленные

<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>`

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

Благодаря
Smitha

источник

2013-12-12 Smitha

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

From Docs

Например, ширина, высота, или влево, может быть анимированный, но фоновый цвет не может быть, если не используется плагин 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>

источник

2013-12-12 10:24:18

У меня была та же проблема, и оказывается, что это было более эффективно использовать добавлять/удалять классы с 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'); 
}

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

источник

2014-10-16 09:01:26 Meira

Вопрос о том, как изменить цвет фона с помощью метода 'animate'. Добавление/удаление класса является альтернативой для получения одного и того же результата, но не цели. – inigomedina

спасибо, это работает для меня. –

Это лучшее решение, чем .animate(), спасибо! –

Изменение фона цвета с помощью Jquery одушевленные

ответ

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