jQuery使用If和Else动画背景颜色

Question

我正在尝试在基于if else标记的backgroundColor的jQuery函数中使用li和backgroundColor = #ccc，例如：如果{{1}做某事，否则做其他事。我试过这样：

if ($(this).css('backgroundColor = #EBE5C5')) {

但它无法正常工作，你能帮助我吗？

嗯，非常感谢，但它仍然无法正常工作，请在此处查看完整功能：

$(function(){
$('.slider-nav li')
    .mouseover(function(){
        if ($(this).css('background-color') == "#EBE5C5") { 
            $(this).stop().animate({'backgroundColor':'#c0ba9f'},250);
        }
    })
    .mouseout(function(){
        $(this).stop().animate({'backgroundColor':'#EBE5C5'},250);
    })
});

Answer 1

jQuery给我们RGB，而不是HEX

jQuery会在请求时为rgb返回#CCC值。例如，如果将背景颜色设置为#CCC，然后使用jQuery请求它：

$(".foo").css("backgroundColor"); // rgb(204, 204, 204)

从RGB获取HEX

这意味着你需要有一种方法可以将rgb转换回HEX。在Stack Overflow上已经提出并回答了这个问题。见Get HEX value rather than RGB value with jQuery。出于我们的目的，我们可以使用以下功能：

//Function to convert hex format to a rgb color
function rgb2hex(rgb){
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}

使平滑的backgroundColor动画可能

这将负责检索和比较。接下来，您需要加载jQuery UI核心，它稍微扩展了$.animate()方法。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui..."></script>

动画背景颜色

使用jQuery UI的核心就位（full path here），您可以执行以下操作：

$(".foo").animate({ backgroundColor: "#999999" }, 1000);

这会逐渐将背景从一开始的动画设置为#999999，直到一秒钟。

All Together Now

所以最后我们有以下内容（假设jQuery UI的核心是链接的）：

//Function to convert hex format to a rgb color
function rgb2hex(rgb){
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}

$("#hello").on("click", function(e){
  background = rgb2hex( $(this).css("backgroundColor") );
  if ( background == '#cccccc' ) {
    $(this).animate({
      backgroundColor: "#123456",
      color: "#fff"
    }, 1000);
  }
});

在线演示：http://jsbin.com/uwiyon/edit#javascript,html

Answer 2

应该是这样的：

if ($(this).css('background-color') == 'red') {
   // do somethig
} else {
   // do something else
}

请记住，一个等号是赋值。

这是jsFiddle：

http://jsfiddle.net/F6WeR/1/

Answer 3

尝试：

if( $(this).css('backgroundColor').indexOf('#EBE5C5')!=-1 )

使用.css和选择器获取值。然后你会看到是否包含新值

这也应该有用，但你必须看看这个值是否有效地返回了。检查

的值

$(this).css('backgroundColor')

然后尝试

if( $(this).css('backgroundColor')=='#EBE5C5' )

Answer 4

你必须进行比较，“$（this）.css（”backgroundColor“）”返回backgroundcolor

if ($(this).css("backgroundColor") === "#EBE5C5") {

注意严格比较的三个等号（你也可以使用“==”但这个更快一点）