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将淡入

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

我隐约知道$（'＃div2'）。fadeIn（3000）;对＃div2构成淡入效果，fadeOut（）对应构成淡出。我如何使用jQuery（我的网站上有1.5.2）淡化＃div1 out和fade＃div2 in WITHOUT影响任何其他div，或者更容易保留代码，因为它隐藏了所有我的div和只是淡出＃div2 in？请记住，我不是Javascript专家，我几乎不是初学者，所以请不要侮辱我的剧本长度或我无法理解我认为会如此简单的事情。

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

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

EDIT @ 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");
  }

原则是：

我的链接有一个调用我的showTab函数的onclick，并将相应的div id放在函数中，例如：

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

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

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

我希望我的jQuery脚本知道哪个div是可见的，哪个不是七个选择。＃div1和＃div2就是一个例子，但它可以是选择中的任何div。以前，当我使用document.getElementById函数时，它工作得很好，我只想在脚本上添加淡入淡出以使其看起来更好。现在，它可以工作，但只有当我循环通过div一次。之后，它只是将我的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插件 - http://bit.ly/NgLRdb看看，看起来很有用....

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

Answer 5

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

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

如何用jQuery淡化一个<div>并淡化另一个<div>？</div> </div>

EDIT @ 01:46 GMT，30/04/2010

5 个答案: