0

フェードイン/フェードアウト トランジションのあるバナーに取り組んでいます。そのシンプルな現実。一定間隔で画像がランダムに変化します。すべて正常に動作します。

問題は、fadeOut 部分にあります。現在表示されている画像はフェードアウトしません。助言がありますか ：） ？

私のためにjsコードをリファクタリングする方法についてのヒントを提供できる親切な存在がそこにいる場合は....私はまだジュニアであり、このプロジェクトではプラグインを使用したくありませんでした。

$(function () {

        var myPix = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 
                                    'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg', 'img/10.jpg',
                                    'img/11.jpg', 'img/12.jpg', 'img/13.jpg' 
                                ],
                randomNum = Math.floor(( Math.random() * myPix.length )),
                aa = '<img src="' + myPix[randomNum] + '" />';

        $('header').append($(aa).fadeIn(1000));

        setInterval( function () {
            var myPix = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 
                                        'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg', 'img/10.jpg',
                                        'img/11.jpg', 'img/12.jpg', 'img/13.jpg' 
                                    ],
                    randomNum = Math.floor(( Math.random() * myPix.length )),
                    aa = '<img src="' + myPix[randomNum] + '" />';

        $('header img').fadeOut(5000).replaceWith($(aa).fadeIn(2000));

        }, 6000);

});

http://jsfiddle.net/simomultimedia/vVyph/

4

3 に答える 3

1

以下を使用します。

 $('header img').fadeOut(5000, function(){$(this).replaceWith($(aa).fadeIn(2000))});
于 2013-04-23T14:56:48.657 に答える
0

フェードアウトの完全な関数にフェードインを配置して、フェードアウト後にのみ開始されるようにします。

$('header').append($(aa).fadeIn(1000));
    setInterval( function () {
        randomNum = Math.floor(( Math.random() * myPix.length )),
        source = "http://nunstoprecords.co.za/"+myPix[randomNum];
        $('header img').fadeOut(2000, function() {$('header img').attr("src",source).fadeIn(2000)});
    }, 5000);

また、それらを同時にフェードインおよびフェードアウトしたい場合は、2 つのイメージ コンテナーを使用します。

于 2013-04-23T15:05:03.167 に答える