0

私は質問の前の部分の解決策を見ました、そしてそれを使ったときそれはうまくいきました、私はそれを以下に含めました（これを見たらrsofterに感謝します！）。背景画像fadeInに効果を追加するために何を追加する必要があるのか​​知りたいですか？fadeOut私が遭遇した解決策は次のとおりです。

これを行うにはjqueryを使用できます。

あなたのマークアップ：

<div id="div1"></div>
<div id="div2"></div>

スクリプト：

$("#div1").mouseover( function() {
    $("#div2").css("background-image", "url('image.png')");
});
4

2 に答える 2

0

あなたが探しているjQuery関数はanimate()

$("#div1").mouseover( function() {
        $("#div2").animate({background-image: "url('image.png')"});
});

animateCSSプロパティのマップにスムーズに移行することです。

これはへの最も簡単な呼び出しですが、animate多くのオプションがあります（リンクを参照）。アニメーションの長さを指定することもできます。

于 2012-09-21T20:03:39.177 に答える
0

背景画像の不透明度をアニメーション化することはできません。不可能です。回避策は<img>、共有内に配置することparent containerです<div id="2">

シナリオ->

<div id="1">
    div 1
</div>
<div id="wrapper">
    <img src="path/to/my/background/image"/>
    <div id="2">

    </div>
</div>

相対的なcss->

#wrapper{
    position:relative;
}
#wrapper img{
    position:absolute;
        top:0;
        left:0;
    z-index:-1
}
#wrapper #div2{
    display:block;
    height: // this value should be the same as the background images size.
    width:  // this value should be the same as the background images size.
}

jQuery->

$('#div1').hover(function(){
    $('#wrapper img').fadeOut('slow', function(){
        //this is the callback function of fadeout, now change the background image URL.    
        $(this).css('background-image', 'location/to/my/new/image.ext');
        var checkForDelay = setTimeout(function(){
            //if they haven't moused out after 3 seconds, then show them the new background.
            $('#wrapper img').fadeIn('slow');
        }, 3000);
    });
}, function(){
   clearTimeout(checkForDelay);
   $('#wrapper img').fadeIn('slow');
});

同様のプリンシパルの概要を示すjsFiddle

于 2012-09-21T20:14:50.310 に答える