javascript - 淡出 Div 内容 - 空 Div 内容 - 淡入新内容

Question

我正在为我的按钮使用 onClick 功能。我的按钮代码如下所示:

<a onClick="fadeNext('#myDIV1',500);">Button 1</a>
<a onClick="fadeNext('#myDIV2',500);">Button 2</a>

我的 JS 函数如下所示:

function fadeNext(selectedId, speed) {

          var containerID = '#imageSwap';
          var vis = ($(containerID + ' div:visible').length > 0) ? $(containerID + ' div:visible').eq(0) : $(containerID + ' div').eq(0);
          var next = $(selectedId);
          vis.fadeOut(speed);

          next.fadeIn(speed);
          } 

这会正确淡化内容并且效果很好，但视频内容 (Vimeo) 在不可见时仍会播放。尝试了这个 JS，但仍然没有运气:

function fadeNext(selectedId, speed) {

          var containerID = '#imageSwap';
          var vis = ($(containerID + ' div:visible').length > 0) ? $(containerID + ' div:visible').eq(0) : $(containerID + ' div').eq(0);
          var next = $(selectedId);
          vis.fadeOut(speed, function() {
              $(this).empty().show();
          });

          next.fadeIn(speed);
          } 

有了这个JS，内容不再淡出或清空。

我是一名 JS 菜鸟，在让 empty() 代码工作时遇到了问题。这样做的主要原因是我的 DIV 将包含视频 (Vimeo)。当用户点击更改内容时，我希望视频被卸载，因此视频/声音不再播放。

如有任何帮助/建议，我们将不胜感激!

Answer 1

检查我的 fiddle 叉:http://jsfiddle.net/tutanramen/umJQ9/16/

我添加了指向外部资源的链接:https://raw.github.com/vimeo/player-api/master/javascript/froogaloop.js

然后我给每个 iframe 一个 id(v1 和 v2 但他们没有用在这个 fiddle 中)和一个播放器类。

然后将其添加到 fadeNext:

$(".player").each(function() {
    $f($(this)[0]).api("pause");
});

现在，当您点击选择另一个视频时，它实际上会暂停所有视频。