Jquery hover - 如何制作背景颜色动画

Question

<div class="post_each">
    <h1 class="post_title">Apartamentos 1 comodo</h1>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb last" src="1.jpg"/>
</div>
<div class="post_each">
    <h1 class="post_title">Apartamentos 2 comodo</h1>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb last" src="1.jpg"/>
</div>
<script type="text/javascript">
    $('img.thumb').hover(function {
        $(this).animate({"background" : "white"}, 600);
    });
</script>

hover()没有起作用。我尝试设置当鼠标悬停时，背景颜色或边框大小应该增加。

- user1124927

---

除非您有另一个插件，或者您正在使用jQuery UI，否则jQuery无法动画颜色。 - David Thomas

Answer 1

您无法通过这种方式使颜色动画化，只有具有单个数字值的属性才允许动画。您需要添加一个单独的颜色动画插件。

该匿名函数缺少括号：

$('img.thumb').hover(function () {

- Sameera Thilakasiri

Answer 2

您不需要使用jQuery...

.thumb {
background: #000;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;}

.thumb:hover {
background: #fff;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;}

Demo here

- Scott

Answer 3

你可以使用颜色插件.. 参考

$('img.thumb').hover(function(){
   $(this).animate({ backgroundColor: 'white' }, 600);
});

您也可以参考之前的线程jQuery背景色动画和jQuery动画背景色

- dku.rajkumar