1

次のコードには2つの個別<div>の要素があり、それぞれに画像が含まれています。どちらかのdivにカーソルを合わせると、背景色がフェードインしてからフェードアウトします。完璧です。

私はこのWebページを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/

画像には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/

于 2012-08-27T20:19:21.260 に答える
0

oldIEでサポートされていないcss3以外では、背景画像をフェードインまたはフェードアウトすることはできません。唯一の回避策は、文字通り透明なdivの後ろに画像を配置し、それらの画像（または画像の背景を持つdiv）をフェードインおよびフェードアウトすることです。

于 2012-08-27T20:03:59.193 に答える