javascript - jqueryでfadeInとfadeOut効果をスムーズに動作させる

Question

画像がフェードインし、フェードアウト効果があるページがあります。フェードインオプションは、すぐに発生するため、問題があるようです...私のjsfiddleを見つけてください。

助けてください

Answer 1

2 つのことは、1 つ目fadeIn()は非表示の要素でのみ実行されるため、最初は画像を非表示にする必要があること、2 つ目はfadeOut()アニメーションが完了するまで待ってから次の画像をアニメーション化する必要があることです。このコードはあなたのために働くはずです、私は間隔とカウント変数を削除しました:

var $slideshowImgs = $('.slideshow img').hide();
(function fadeSlideshow ($img){
    var $next = $img.next();
    if(!$next.length)
        $next = $slideshowImgs.first();
    $img.delay(2000).fadeOut(function(){
        $next.fadeIn();
        fadeSlideshow($next);
    });
})($slideshowImgs.first().show());

デモフィドル

Answer 2

このjsフィドルをチェックしてください http://jsfiddle.net/TXrDk/2/

使用する

transition:.5s ease-in-out;