1

サムネイルをクリックするとメイン画像が読み込まれるスクリプトをまとめましたが、現在、あるサムネイル画像から別のサムネイル画像をクリックすると画像が切り替わるだけなので、よりスムーズな移行が必要です。

これまでの私のコード..

 $('#thumbnails ul li').click(function(){
    $('#main').fadeOut(500, function() {
        $('#main').attr('src',$(this).find('img').attr('src').replace('small/', 'large/'));
}).fadeIn(500);
return false;
});

上記のコードではスムーズにフェードアウトしますが、クリックしたときに次の画像をフェードインさせることができません。これが何であるか知っていますか？

ありがとう

4

2 に答える 2

0

あなたが与えた小さなスニペットで問題を評価するのは少し難しいです。.hide（）で新しい画像を非表示にしてみてください

 $('#thumbnails ul li').click(function(){
    $('#main').fadeOut(500, function() {
        $('#main').attr('src',$(this).find('img').attr('src').replace('small/', 'large/')).hide();
}).fadeIn(500);
return false;
});
于 2012-08-24T00:59:14.447 に答える
0

$(this).find('img')...メソッドのコンテキストの外側に配置する必要がありfadeOutます。コードでthis目的の要素（要素）を参照していない場合は、次のことをli試してください。

$('#thumbnails ul li').click(function(){
    var src = $(this).find('img').attr('src').replace('small/', 'large/');
    $('#main').fadeOut(500, function() {
        $(this).attr('src', src);
        $(this).on('load', function(){
            $(this).fadeIn()
        })
    })
    return false;
});
于 2012-08-24T01:00:37.867 に答える