jQuery – 使用动画仍然需要帮助19.02.2012在div上切换背景颜色

我希望避免使用css转换。

我有三个同一类的div。 我点击时试图切换一个div的背景颜色。 再次单击div或单击其中一个时，我希望它返回默认值。

我已经包含了jQuery颜色插件，并成功地改变了点击的颜色。 我相信我的条件是错误的，这就是为什么我不能在点击其他div时改变颜色。

这就是我所做的：

 jQuery(document).ready(function() { $('.link').click(function() { var $me = $(this); if ($me.css("background-color") == "#993") { $me.animate({backgroundColor:"#246"}, 500); } else { $(".link").each(function() { if ($(this) != $me) { if ($(this).css("background-color") == "#246") { $(this).animate({backgroundColor:"#993"}, 500); } } }); $me.animate({backgroundColor:"#246"}, 500); } }); });   .link { width:100px; padding:10px; background-color:#993; float:left; display:inline; text-align:center; }    
link
 
link2
 
link3 

我在理解backgroundColor概念时遇到了一些麻烦，并希望得到帮助。 🙂

谢谢！

Answer 1

试试这个。 如果你想使用CSS，CSS3可能会有所帮助。

有3个div，当你点击其中一个时，它会变成蓝色。 当你点击其他div时，蓝色会变红并点击一个就会变成蓝色。 如果你要点击蓝色，它会变成蓝色。

Answer 2

使用jQuery默认情况下无法为background-color设置动画。 您需要使用jQuery Color这样的插件，它是jQuery UI的一部分。

然后你可以用toggle()来做到这一点：

HTML

 
 Color 

CSS

 div { height: 50px; width: 50px; background: #ff0000; } 

JQ

 $('button').toggle(function(){ $('div').animate({'background-color': '#00ff00'}); }, function(){ $('div').animate({'background-color': '#ff0000'}); }); 

示例 http://jsfiddle.net/kh6pj/1/