jQuery檢查CSS屬性

Question

fid： https : //jsfiddle.net/79un7vw5/1/

我要檢查div的背景是否為紅色，將鼠標懸停在右側時。 否則，將div懸停在左側。

為什么它不能正確檢查我的CSS屬性？

 $(".div").hover(function(){ if( $(".div").css('background') == 'red'){ $(this).animate({right: '0px', backgroundColor:"rgb( 20, 20, 20 )"}); // will be called when the element finishes fading out // if selector matches multiple elements it will be called once for each } else{ $(this).animate({left: '0px', backgroundColor:"rgb( 20, 20, 20 )"}); } }); 

 .div{ background:red; height:100px; width:100px; position:absolute; left:0; } .parent{ border:1px solid black; width:500px; height:100px; position:relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="div"></div> </div> 

Answer 1

這是您的問題的小提琴：

http://jsfiddle.net/aw42aj2L/38/

這就是代碼的樣子：

$(document).on("mousemove", ".div", function(){
if( $(this).css('background-color') == 'rgb(255, 0, 0)'){
$(this).animate({right: '0px', "background-color":"rgb( 20, 20, 20 )"});


    // will be called when the element finishes fading out
    // if selector matches multiple elements it will be called once for each
  }
  else{
  $(this).css({"background-color": "#FFFFFF"});
  $(this).animate({left: '0px','background-color': "rgb(20,20,20)"}, 1200);

  }

});

另外，請注意，此處將jquery UI用於彩色動畫。

<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>