jQuery Slider FadeIn（）

Question

使用fadeIn / fadeOut过渡处理横幅广告。它很简单。在间隔期间，图像随机变化。一切正常。

问题在于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/

Answer 1

将fadeIn()置于fadeOut()回调函数内：

$('header img').fadeOut(5000, function() {
    $(this).replaceWith($(aa).fadeIn(2000));
});

Updated fiddle

Answer 2

使用以下内容：

 $('header img').fadeOut(5000, function(){$(this).replaceWith($(aa).fadeIn(2000))});

Answer 3

淡入淡出的完整功能，所以它只会在淡出后启动：

$('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);

另外，如果你想同时淡入和淡出它们，请使用两个图像容器。