php - 如何使用 jQuery 淡出一个 并淡入另一个 ？

Question

我正在构建我的投资组合，我想创建一个画廊来展示我的项目。我有七个 div 的选择，其中包含构成我网站的选项卡式导航部分的内容。与其他选项卡式导航一样，任何时候只有一个包含内容的 div 处于事件状态。但是，与其他选项卡式导航不同，该导航由 ​​PHP 控制。如果某些内容(当前设置为 file_exists 函数，但很快将被 MySQL 控制)可用，则 div 将被写入导航并显示相应的链接。如果不是，那么链接将被隐藏，div 将不会被写入。所需文件基于 $_GET 调用，所需文件因 $_GET 变量内的字符串而异。

每个选项卡都有一个唯一的 ID。目前(因为我不是 Javascript 专家)，我有一个“重置”选项，可以将所有命名 div 的样式设置为“隐藏”样式，然后将我选择的 div 设置为“可见”状态。

如果可能的话，我想做的是:

我想从#div1 转到#div2。 Div 1、2、4 和 6(对于本示例)处于事件状态。我单击告诉我的页面显示#div2 的链接(该函数目前只说隐藏所有 div 然后显示 #div2，所有其他 div 的隐藏是一个单独的函数，在此函数中调用)。 #div1 当前可见。

#div1 将淡出

#div2 将淡入

Div 4 和 6 不会受到影响。 Divs 3、5 和 7 不会被触及，因为它们(就我的页面而言)不存在。对于此示例，每个淡入淡出可能需要 3 秒。

我隐约知道 $('#div2').fadeIn(3000);将构成#div2 的淡入效果，而fadeOut() 对应物将构成淡出效果。我如何使用 jQuery(我的网站上有 1.5.2)在不影响任何其他 div 的情况下淡出 #div1 和淡入淡出 #div2，或者更容易保留代码，因为它隐藏了我所有的 div 和只是淡入#div2？请记住，我不是 Javascript 专家，我只是一个初学者，所以请不要侮辱我的脚本的长度或我无法理解我认为很简单的东西。

请记住，我的导航中最多有七个 div。脚本必须根据点击的链接找到可见的 div 并将其淡出，然后淡入我选择的 div，并且它不能触及任何剩余的 div。

这很容易理解并获得答案吗？

2010 年 4 月 30 日格林威治标准时间 01:46 编辑

谢谢，但这些看起来不像我想要的。如果只有两个 div，它们看起来会起作用，但请记住，最多有七个，并且链接应该知道哪个 div 可见，哪些未考虑在内。

我目前有我的 PHP 脚本说“如果这个文件存在，那么创建这个 div 并将样式 'visibleTab' 应用到它。否则，创建它，但对其应用样式 'hiddenTab'。”我的 Javascript(现在是 jQuery)代码如下:

  function resetTabs() {
    $("#postersandprint").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#mobileapp").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#stylesheets").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#storyboards").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#motionpieces").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#interactives").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#developmentwork").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
  }

  function showTab(tabname) {
    resetTabs();
    $('#'+tabname).fadeIn(3000);
    $("#"+tabname).removeClass("hiddenTab").addClass("tabs visibleTab");
  }

原理是这样的:

我的链接有一个 onclick 调用我的 showTab 函数并将适当的 div id 放在函数中，例如:

<a href="javascript:;" onclick="showTab('mobileapp');">Link</a>

该函数隐藏所有 div，然后淡入由 'tabname' 调用的 div，在本例中为“mobileapp”。

在添加“hiddenTab”类作为一种“故障安全”方法之前，我已经告诉每个重置函数删除任何名为“hiddenTab”的类以及任何名为“visibleTab”和“tabs”的类。我还告诉我的 showTab 函数从我想要可见的选项卡中明确删除“hiddenTab”类，并添加类“tabs”和“visibleTab”。我忘记了为什么我有两种风格，但我相信原因会找上我。

我希望我的 jQuery 脚本知道哪个 div 是可见的，哪个不在七个的选择中。 #div1 和 #div2 是一个示例，但它可以是选择中的任何 div。之前，当我使用 document.getElementById 函数时，它工作得很好，我只是想在脚本中添加淡入淡出效果以使其看起来更好。现在，它可以工作，但只有当我在 div 中循环一次时才有效。之后，它只是将我的 div 附加在可见的 div 下方，它不会隐藏它们。我知道我错过了什么，或者我在某个地方搞砸了，但是我错过了什么？我哪里搞砸了？

Answer 1

虽然没有在标签中设置，但希望这个 jsfiddle示例会对您有所帮助。 [编辑，现在总共添加了4个div，等待动画完成再点击下一步]

基本上它使用 :visible selector 在容器 div 中搜索可见的元素。
.eq(0)说只从选择器返回的集合中抓取第一个可见元素。如果没有可见元素，它只选择第一个元素。

然后它选择要显示的 id。

使用以下命令同时调用两个动画:

vis.fadeOut(speed);
next.fadeIn(speed);

如果您想等待一个淡出，然后再使用其他答案中提到的回调淡出下一个。

这在所有新式浏览器上都可以正常工作，但在 IE7 或更低版本上会有些卡顿。

或者，您可以使用 :hidden 获取隐藏元素的集合。

如果您想要一个更直接的示例，您可以发布您的 html，以便我们可以帮助您找到最适合的确切选择器。