0

正在制作带有淡入/淡出过渡的横幅。真的很简单。每隔一段时间，图像就会随机变化。一切正常。

问题在于淡出部分。当前显示的图像不会淡出。有什么建议么 ：） ？

如果有任何善良的人可以提供有关如何为我重构 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

2

把fadeIn()里面的fadeOut()回调函数：

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

更新的小提琴

于 2013-04-23T14:54:31.037 回答
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);

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

于 2013-04-23T15:05:03.167 回答