jQuery替代淡入/淡出div背景

时间:2012-08-27 20:01:12

标签: jquery html css css3 transition

以下代码包含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是否有一种简单的方法可以复制我正在尝试使用上面的内容?

非常感谢任何指示。

2 个答案:

答案 0 :(得分:1)

如果您使用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/

答案 1 :(得分:0)

除了使用css3之外,不能淡入或淡出背景图像,这在oldIE中是不受支持的。唯一的解决方法是将图像放置在透明div之后,淡入淡出这些图像(或带图像背景的div)。