1

divの背景画像をフェードインできるか検討中 現在該当するdivの背景画像をホバーすると表示する機能があるのですが、表示/非表示がちょっときついです 欲しいです代わりにフェードイン/フェードアウトするには、その方法がわかりません。

これが私のコードです：

jQuery(document).ready(function(){
    jQuery(".thumbnail").hover(function(){
        var imgurl = jQuery(this).data("hoverimage");
        jQuery(this).css("background-image", "url(" + imgurl + ")");
    }, function(){
        jQuery(this).css("background-image", "");
    });
});

この関数は、単に mouseenter で背景画像を表示し、mouseleave で再び非表示にします。代わりに、関連する div にカーソルを合わせたときにフェードインし、div を離れるときにフェードアウトすることはまったく可能ですか?

4

2 に答える 2

0

$(".blah").animate({}) には color プロパティがあるという印象を受けましたが、そうではありません (少なくとも私の知る限り)。

ここで抜け道が見つかるかもしれません: http://api.jquery.com/fadeIn/(最後のコード スニペット)。

于 2013-02-13T12:37:32.603 に答える
0

背景画像のみをフェードインすることはできません。できることは、背景画像を持つ同一のオフセットを持つ要素 (または画像要素自体) をフェードインすることです。position: fixed必要なイメージを持つ別の要素 (または親が相対的な場合は絶対)を追加するだけです。

$("#hasbg").append($("<div>").css({
    position: 'fixed',
    top: $("#hasbg").offset().top,
    left: $("#hasbg").offset().left,
    display: 'none',
    background: 'url(http://static.adzerk.net/Advertisers/bd294ce7ff4c43b6aad4aa4169fb819b.jpg)',
    width: $("#hasbg").width(),
    height: $("#hasbg").height()
}).attr('id', 'isbg')).on('mouseenter', function () {
    console.log($("#isbg").length);
    $("#isbg").stop().fadeIn();
}).on('mouseleave', function () {
    $("#isbg").stop().fadeOut();  
});

http://jsfiddle.net/ExplosionPIlls/nenf3/

于 2013-02-12T00:11:58.200 に答える