1

以下代码有 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有没有一种简单的方法来复制我试图用上面做的事情？

非常感谢您的任何指点。

4

2 回答 2

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/

您可以对图像使用淡入淡出

$('.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/

您可以使用 opacity 淡入和淡出图像。但由于 google 徽标作为子元素在内部，它会随之淡入/淡出。

http://jsfiddle.net/NJe63/5/

于 2012-08-27T20:19:21.260 回答
0

除了 css3 之外，不能淡入或淡出背景图像，这在 oldIE 中不受支持。唯一的解决方法是将图像放在透明 div 后面并淡入和淡出这些图像（或具有图像背景的 div）。

于 2012-08-27T20:03:59.193 回答