Php 我该如何淡化一个<；部门>；使用jQuery退出并淡出另一个<；部门>；在里面

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

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

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

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

#第一组将淡出

#第二组将逐渐消失

第4和第6部分不受影响。第3、5和7部分将不会被触及，因为它们（就我的页面而言）不存在。在本例中，每次褪色可能需要3秒钟

我模模糊糊地意识到，$（'#div2'）.fadeIn（3000）；将构成#div2的淡入效果，淡出（）对应项将构成淡出。我如何使用jQuery（我的网站上有1.5.2）淡出和淡入，而不影响任何其他div，或者更容易保持代码的原样，隐藏我的所有div并淡入？请记住，我不是一个Javascript专家，我只是一个初学者，所以请不要侮辱我的脚本长度或我无法理解的东西，我猜这将是如此简单

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

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

2010年4月30日格林尼治时间01:46编辑 谢谢，但是这些看起来不像我想要的。如果只有两个div，它们看起来可以工作，但是请记住，最多有七个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下面，而不是隐藏它们。我知道我错过了什么，或者我把事情搞砸了，但我错过了什么？我哪里搞砸了？

也许这就是你想要的

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

---

调用任何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，您可以识别一个特定的my it's id，如

“#div1”

此外，还可以使用id属性设置它：

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

---

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

基本上，它在容器div中搜索使用

.eq（0）

表示只从选择器返回的集合中获取第一个可见元素。如果没有可见元素，则只选择第一个元素

然后选择要显示的id

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

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

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

这在所有新的ish浏览器上都能正常工作，但在IE7或更低版本上会有点阻塞

或者你可以

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