jQuery检查CSS属性

时间:2016-09-05 02:45:20

标签: javascript jquery html css

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

我想检查我的div的背景是否为红色,悬停时,向右移动。 否则,在悬停时将div移到左侧。

为什么不正确检查我的css属性?

let newView = UIView() newView.backgroundColor = UIColor.redColor() 

newView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(newView) 

let pinTop = NSLayoutConstraint(item: newView, attribute: .Top, relatedBy: .Equal, toItem: 

self.topLayoutGuide, attribute: .Bottom, multiplier: 1.0, constant: 0) 

let heightConstraint = newView.heightAnchor.constraintEqualToAnchor(nil, constant: 50) 

let widthConstraint = NSLayoutConstraint(item: newView, attribute: .Width, relatedBy: .Equal, toItem: view, attribute: .Width, multiplier: 1.0, constant: 0) 

self.topContentAdditionalInset = 50 

NSLayoutConstraint.activateConstraints([pinTop, heightConstraint, widthConstraint])
$(".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;
}

1 个答案:

答案 0 :(得分:0)

以下是您问题的小提琴:

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>