如何为数组中的每个对象添加fadeIn（）方法

Question

我有一个Iframe，其来源每5秒更改一次：

 $(window).load(function() { if (typeof $('.frame') != 'undefined' || null) { $(".frame").ready(function() { var locations = ['http://www.webstarts.com/support/2011/03/how-to-add-an-iframe-to-your-webstarts-website/', 'http://www.wix.com/app-market/html-iframe-embed/overview', 'http://codepen.io/jmelgoza/pen/jEaGYg', 'http://www.oddee.com/item_96986.aspx', 'http://www.imdb.com/title/tt2488496/', 'http://www.w3schools.com/tags/tag_iframe.asp' ]; var len = locations.length; var iframe = $('.frame'); var i = 0; setInterval(function() { iframe.attr('src', locations[++i % len]); }, 5000); }); } }); 

我想拥有它，以便每次更改源时都有一个fadeIn / fadeOut效果。 我将如何去做呢？ 当前，源正在切换，但是它在源之间突然弹出。 我希望在切换源时在它们之间有一个更优雅的过渡。 任何帮助都会很棒。 谢谢。

Answer 1

尝试这个：

setInterval(function() {
    iframe.attr('src', locations[++i % len]);
    iframe.fadeOut(300, function() {
        iframe.fadeIn(300);
    });
}, 5000);

Answer 2

我最终使用了这样的东西：

  setInterval(function () { iframe.attr('src', locations[++i % len]); iframe.fadeOut(300, function () { iframe.fadeIn(300); }); 

并替换了当前间隔功能。 无论谁向我推荐了这个，我都会被“投票赞成”，但是我再也看不到他们的帖子了。 另外，如果还有关于如何改进此代码的建议（即使它似乎正在工作），我也在听。 我相信它会更好。

Answer 3

随着更多与代码相关的问题的出现，我可以更新此答案，但首先要注意的是这一行：

if (typeof $('.frame') != 'undefined' || null) {

我认为您在这里寻找的是防御性编程技术：

if ($('.frame') != null && $('.frame').length > 0) {