淡出 Div 内容 - 空 Div 内容 - 淡入新内容答案

【问题标题】：Fadeout Div Content - Empty Div Content - Fadein New Content淡出 Div 内容 - 空 Div 内容 - 淡入新内容
【发布时间】：2013-03-11 12:28:51
【问题描述】：

我正在为我的按钮使用 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)。当用户点击更改内容时，我希望卸载视频，因此不再播放视频/声音。

任何帮助/建议将不胜感激！

【问题讨论】：

如果没有更多代码，很难准确判断您在做什么，但我做了一个快速测试，并且 empty() 似乎确实停止了 vimeo 视频。查看这个简单的 jfiddle：jsfiddle.net/judeosborn/9HUmZ/1
非常感谢您的帮助。我用我的代码创建了一个 jfiddle：link
当我尝试添加空功能时，事情变得一团糟：link 这些按钮第一次似乎工作正常，但在后续点击时无法加载新的 div 内容。
好像内容一旦被清空，后续的请求就没有办法取回内容了。有什么想法吗？

标签： javascript video fadein fadeout

【解决方案1】：

查看我的小提琴叉：http://jsfiddle.net/tutanramen/umJQ9/16/

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

然后我给每个 iframe 一个 id（v1 和 v2，但它们没有在这个小提琴中使用）和一个播放器类。

然后将这个添加到fadeNext：

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

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

【讨论】：