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

试试这个：

"use strict";

const foo = 'foo';

(() => {
  const foo = 'bar';
  console.log('hi!');
})()

foo
// => 'foo'

Answer 2

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

＆＃13;

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

＆＃13;

并替换当前的间隔函数。我也会投票＆＃39;谁推荐给我，但我不再看到他们的帖子。此外，如果有关于我应该如何改进这个代码的建议（即使它似乎工作）我正在听。我相信它会更好。

Answer 3

我可以更新这个答案，因为代码的更多问题变得相关，但首先要突出的是这一行：

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

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

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

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

3 个答案: