2

こんにちは、Jquery で .css を使用して背景画像を変更しているときにフェードイン効果を追加しようとしています

CSS の背景画像を変更するためのコードは、ここでは非常に単純です。

$(document).ready(function(){
$("#button01").click(function () {
      $("#content_wrapper").css({backgroundImage : 'url(image/staff/shinji.jpg)' } );
        });
    });

それはイメージ ギャラリーのようなものです。CSS の背景イメージで表示するだけですべて正常に動作しますが、フェードインまたはフェード トゥ効果を追加できるかどうか疑問に思っていました。

4

2 に答える 2

1

ある画像を別の画像にフェードすることはできません。無地の背景色などのプロパティのみです。

できることは、画像を含む要素の不透明度をフェードすることです。

この方法を使用して、必要な効果を得るために必要なことは、2 つの画像を重ねることです。

次に、一方をフェードインしながら他方をフェードアウトできます。

次のようなものです：

// write a little function to do a toggling fade
jQuery.fn.fadeToggle = function(speed, easing, callback) { 
   return this.animate({opacity: 'toggle'}, speed, easing, callback); 
};

// make sure one layer is marked as active and shown and the other is hidden
$("#layer1").show();
$("#layer2").addClass('inactive').hide();

// then you can do this:
$("#button01").click(function () {
    $("#layer1").fadeToggle('slow').toggleClass('inactive');
    $("#layer2").fadeToggle('slow').toggleClass('inactive');
    // then set the new background image for the hidden layer
    $(".inactive").css({backgroundImage : 'url(image/staff/shinji.jpg)' } );
};

おそらく美しい方法ではありませんが、うまくいくはずだと思います。

于 2011-02-20T21:04:44.710 に答える
0

フェード効果を得るには、両方の画像をある程度同時に表示する必要があります。2層を使用することをお勧めします。下部には、フェードアウトしたい画像が常に含まれます。一番上のレイヤーには、透明になる画像が含まれます。

背景がフェードするコンテナ内にコンテンツを含めることはできません。そうしないと、フェード効果がコンテンツにも影響します。

次に、jQuery とエフェクトを使用して、次のようにします。

$('#element').fadeOut('slow', function() {
    // Animation complete.
});
于 2011-02-20T21:10:35.623 に答える