如何淡入淡出一个 使用 jQuery 淡出另一个 在？

Question

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

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

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

我想从 #div1 转到 #div2。 Divs 1、2、4 和 6（对于本例）处于活动状态。我单击告诉我的页面显示 #div2 的链接（该函数当前仅表示隐藏所有 div，然后显示 #div2，所有其他 div 的隐藏是一个单独的函数，在该函数中调用）。 #div1 当前可见。

1. #div1 将淡出
2. #div2 将淡入

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

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

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

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

编辑 @ 01:46 GMT, 30/04/2010

谢谢，但这些看起来不像我想要的。如果只有两个 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”调用的那个中，在本例中为“mobileapp”。

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

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

Answer 1

虽然没有在选项卡中设置，但希望这个 jsfiddle 示例会对您有所帮助。 [编辑，现在总共添加了 4 个 div，在单击下一步按钮之前等待动画完成]

基本上，它使用 :visible 选择器

.eq(0) 表示仅从选择器返回的集合中获取第一个可见元素。如果没有可见元素，它只选择第一个元素。

然后它选择要显示的 id。

同时调用两个动画：

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

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

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

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

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

Answer 2

也许这就是你想要的？

  $('#div1').fadeOut('3000', function() {
       $('#div2').fadeIn();
  });

Answer 3

当您调用任何 jQuery 效果函数时，其中一个参数是动画完成时调用的回调函数。你只需要做这样的事情

$("#div1").fadeOut(1000, function(){
    $("#div2").fadeIn(1000);
});

这是一个演练

$("#div1").fadeOut(1000, function(){

这表示当 id 为“div1”的 div 将面朝外 1000 毫秒（1 秒），然后它将调用该函数。

$("#div2").fadeIn(1000);

这只会让您的新想法在另一个想法完全淡出后淡入。

});

只需关闭我们打开的所有内容即可。

我认为你担心的是，

$("div").fadeOut(1000);

会淡出页面上的所有 div，但放置一个散列标记和一个 id，你可以识别特定的一个，我的 id 就像 "#div1"

另外，你设置它带有 id 属性：

<div id = "div1"></div>

Answer 4

我找到了这个 jShowOff：Erik Kallevig 的 jQuery 内容旋转器插件 - http://bit.ly/NgLRdb 给它一看，似乎很有用......

目前正在尝试将其作为我的 joomla 网站上的模块

Answer 5

$("#button").click(function()
{
$("#div1").fadeOut("fast");
$("#div2").fadeIn("slow");
});

此代码将像单击按钮一样淡出 div1，然后慢慢淡入另一个 div 作为 div2。