0

親指とメインの写真でギャラリーを作成しました。これはコードです:

.click(function () {
    $('span.arrow').remove();  
    $('#frtitle').html($(this).find("img").attr('title'));
    $('#desc').html($(this).find("img").attr('alt'));         
    $(this).append('<span class="arrow"></span>');
    $('#slideshow-main li').removeClass('active').animate({opacity: 0.0}, 1000);        
    $('#slideshow-main li.' + $(this).attr('rel')).addClass('active').animate({opacity: 1.0}, 1000);    
    return false;
});

しかし、フェードインとアウトがうまく機能せず、背景とフェードアウトが速く表示されます

メインギャラリーはこちらからご覧いただけます。

4

2 に答える 2

0

画像がフェードアウトすらしないように見えます。画像が一瞬で白い背景に消えていくように見えた後、次の画像が徐々にフェードインしていきます。設定中display: noneか、クラスvisibility: hiddenを削除したときだと思います。active

activeクラスのプロパティを変更したり、後で割り当てたりした後、あなたが探しているのは（Stefan Fandlerが述べたものに加えて）これに近いものだと思います。

$('#slideshow-main li').animate({opacity: 0.0}, 1000);

...そして、クラスを通して画像が消えることはありません。

もう1つのオプションは、CSS3トランジションを使用して不透明度を変更することです。次のようなもの：

transition: opacity 1.5s linear;      
-webkit-transition: opacity 1.5s linear;  
-moz-transition: opacity 1.5s linear;  
-o-transition: opacity 1.5s linear;  
-ms-transition: opacity 1.5s linear;

このオプションでは、フェードインおよびフェードアウトにJavaScriptを使用する必要はありません。

于 2012-06-15T22:07:16.153 に答える
0

フェードアウトが完了する前にフェードインが開始されるようです。

-functionに callback-function を渡すことができanimate()ます。アニメーションが完了すると呼び出されます:)

$('#slideshow-main li').removeClass('active').animate({opacity: 0.0}, 1000, function() {        
    $('#slideshow-main li.' + $(this).attr('rel')).addClass('active').animate({opacity: 1.0}, 1000);
});
于 2012-06-15T20:38:53.193 に答える