首页 文章

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

提问于
浏览 次
2

我正在构建我的投资组合，我想创建一个库来显示我的项目 . 我有七个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 .

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

编辑@ 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下面，它不会隐藏它们 . 我知道我错过了什么，或者我搞砸了某个地方，但是我错过了什么？我搞砸了哪里？

php jquery fadein fade fadeout

5 回答

  • 0

    虽然没有设置在选项卡中，但希望这个例子会对你有所帮助 . [编辑，现在共添加4个div，等待动画完成后点击下一个按钮]

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

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

    然后它选择要显示的ID .

    通过以下方式同时调出两个动画：

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

    如果你想在淡出下一个使用之前等待一个淡出，那么在其他答案中提到的回调 .

    这适用于所有新的浏览器但是在IE7或更低版本上扼杀了一下 .

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

    如果你想要一个更直接的例子，你可以发布你的html，这样我们就可以帮助你选择最合适的选择器 .

    回复于
  • 0

    也许这就是你想要的？

    $('#div1').fadeOut('3000', function() {
       $('#div2').fadeIn();
  });
    回复于
  • 2

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

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

    这是一个散步

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

    这表示当id为“div1”的div将面向1000毫秒（1秒）并且在它将调用该函数之后 .

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

    这简直让你的新想法淡出 after ，另一个已经完全消失了 .

    });

    只需关闭我们打开的所有内容 .

    我觉得你担心的是那个

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

    将淡出页面上的所有div，但是添加一个哈希标记和一个id你可以识别一个特定的一个我的id就像 "#div1"

    此外，您使用id属性设置它：

    <div id = "div1"></div>
    回复于
  • 1

    我找到了这个jShowOff：Erik Kallevig的jQuery Content Rotator插件 - http://bit.ly/NgLRdb给它看看，看起来非常实用....

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

    回复于
  • 0
    $("#button").click(function()
{
$("#div1").fadeOut("fast");
$("#div2").fadeIn("slow");
});

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

    回复于

相关问题