以下代码具有2个单独的<div>
元素,每个元素中均带有一个图像。当我将鼠标悬停在任一div上时,背景颜色会逐渐变暗,然后逐渐变暗-完美!
我的网页在Firefox中运行良好,但是在IE中却无法发挥作用,因此我想知道是否有实现该目标的jQuery版本?
如果有帮助,这是一个jsfiddle:http://jsfiddle.net/mcgarriers/NJe63/
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box, .box2 {
float:left;
width:200px;
height:200px;
background:blue;
-webkit-transition: background 1s;
}
.box:hover {
background:red;
transition: background 1s;;
-moz-transition: background 1s;; /* Firefox 4 */
-webkit-transition: background 1s;; /* Safari and Chrome */
-o-transition: background 1s;; /* Opera */
}
.box2:hover {
background:black
}
</style>
</head>
<body>
<div class="box">
<img src="http://www.internetlearningsociety.com/images/logos/google_logo3.jpg" />
</div>
<div class="box2">
<img src="http://www.internetlearningsociety.com/images/logos/google_logo3.jpg" />
</div>
</body>
</html>
jQuery是否有一种简单的方法来复制我在上面所做的工作?
非常感谢您的指导。
最佳答案
如果使用jQuery UI,则可以使用animate完成此操作
$('.box').mouseenter(function(){
$(this).stop().animate({ backgroundColor: "red" }, 1000);
}).mouseleave(function(){
$(this).stop().animate({ backgroundColor: "blue" }, 1000);
});
$('.box2').mouseenter(function(){
$(this).stop().animate({ backgroundColor: "black" }, 1000);
}).mouseleave(function(){
$(this).stop().animate({ backgroundColor: "blue" }, 1000);
});;
http://jsfiddle.net/NJe63/1/
编辑:
只需在最后添加
.children('img').hide()
.children('img')show()
$('.box').mouseenter(function(){
$(this).stop().animate({ backgroundColor: "red" }, 1000).children('img').show();
}).mouseleave(function(){
$(this).stop().animate({ backgroundColor: "blue" }, 1000).children('img').hide();
});
$('.box2').mouseenter(function(){
$(this).stop().animate({ backgroundColor: "black" }, 1000).children('img').show();
}).mouseleave(function(){
$(this).stop().animate({ backgroundColor: "blue" }, 1000).children('img').hide();
});;
http://jsfiddle.net/NJe63/2/
您可以为图像使用fadeIn,fadeOut
$('.box').mouseenter(function() {
$(this).children('img').stop(true,true).fadeIn(1000);
}).mouseleave(function() {
$(this).children('img').stop(true,true).fadeOut(1000);
});
$('.box2').mouseenter(function() {
$(this).children('img').stop(true,true).fadeIn(1000);
}).mouseleave(function() {
$(this).children('img').stop(true,true).fadeOut(1000);
});
http://jsfiddle.net/NJe63/3/
您可以使用不透明度来淡入和淡出图像。.但是,由于google徽标位于子元素中,因此会随之淡入/淡出。
http://jsfiddle.net/NJe63/5/
关于jquery - jQuery替代品,用于在div背景中淡入/淡出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12148772/