如何使用 jQuery 淡出一个 <div> 并淡入另一个 <div>？

Question

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

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

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

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

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

Divs 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，2010 年 4 月 30 日

谢谢，但这些看起来不像我想要的。如果只有两个 div，它们看起来就可以工作，但请记住，最多有 7 个，并且链接应该知道哪些 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”类，并添加“选项卡”和“visibleTab”类。我忘记了为什么我有两种风格，但我相信原因会来找我的。

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

Answer 1

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

基本上，它在容器 div 中搜索使用 :visible selector 可见的元素

.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 Content Rotator Plugin - http://bit.ly/NgLRdb 看看，看起来很有用....

目前正试图将其作为一个模块放在我的 joomla 网站上

Answer 5

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

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