1

jQuery関連の質問 - 私は小さなギャラリースタイルのスクリプトを動かしています.

$('#thumbs').delegate('img','click', function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

私の質問は次のとおりです。ストレート スイッチではなく、画像のトランジションを互いにフェードさせる最も簡単な方法は何ですか?

ご協力いただきありがとうございます。

4

3 に答える 3

2

fadeOut画像fadeInを交換した後、コールバックで次のことができsrcます。

$('#thumbs').delegate('img','click', function(){
    var src = this.src.replace('thumb', 'large');
    $("#largeImage").fadeOut(function() {
        this.src = src;
        $(this).fadeIn();
    });
});

gravatars を使用した実例| ソース

attr( forを通過する必要がないことに注意してくださいsrc。これは DOM 要素に反映されます。)

于 2012-05-14T09:06:23.480 に答える
1

最も簡単な方法は、存在する jQuery サイクル プラグインの 1 つを使用することです。@ malsup.comが人気のある選択肢です。

自分でコーディングする場合は、2 つの画像要素を使用して、一方を他方の後ろに配置し、上にあるものをフェードアウトする必要があります。

position: relative これを行うには、 の親で<img />を使用し、で を使用position: absolute; top: 0; left: 0;し<img />ます。一番上の画像をフェードアウトしfadeOut()たら、コールバックで削除できます。

$('img_on_top').fadeOut('slow', function () {
    $(this).remove();
});
于 2012-05-14T09:06:17.240 に答える
0 
$('#thumbs').delegate('img','click', function(){
    var src = $(this).attr('src').replace('thumb','large');
    $('#largeImage').fadeOut(100,function() {
      $(this).attr('src',src).fadeIn();
    });
});
于 2012-05-14T09:06:37.027 に答える