无论是使用jQuery的或纯JavaScript以淡入淡出和

这是我所使用计算器的第一次，所以我来到这里。无论是使用jQuery的或纯JavaScript以淡入淡出和

我创建了导航网站，目前，我已创建的按钮。默认情况下（主页）使用JavaScript显示幻灯片，并且这些都包含在div中。

当我点击，让我们说的“关于我”页面，我想该div淡出，另一格褪色，其中将包含图片和文字。

这里是我的代码：

<body> 
    <div id="top_wrapper"> 
     <a class="button navigation" id="homeBtn">Home</a> 
     <a class="button navigation" id="aboutBtn">About Me</a> 
     <a class="button navigation" id="coachBtn">Peronsal, Business and Professional Coaching</a> 
     <a class="button navigation" id="successBtn">Success Stories</a> 
     <a class="button navigation" id="workBtn">Community Work</a> 
     <a class="button navigation" id="charityBtn">Charity</a> 
     <a class="button navigation" id="contactBtn">Contact Me</a> 
    </div> 
    <div id="home"> 
     <div id="sliderFrame"> 
      <div id="slider"> 
       <img src="_images/_image01.jpg" /> 
       <img src="_images/_image02.jpg" /> 
       <img src="_images/_image03.jpg" /> 
       <img src="_images/_image04.jpg" /> 
       <img src="_images/_image05.jpg" /> 
      </div> 
     </div> 
     <div id="border"> 
      <img src="_images/_border.png" /> 
     </div> 
    </div> 
    <div id="aboutme"> 
     <div id="text"> 
      <p>This is the text</p> 
     </div> 
    </div> 
</body>

在我的例子，我想，当用户点击“关于我”按钮，在div“家”淡出和DIV“aboutme”中消失。

我已经试过几乎所有的计算器上的例子还有什么了jQuery/JavaScript的网站，谷歌可能会在我，没有运气扔。

来源

2013-04-26 Mashy

我认为这个问题是关于“使用jQuery或普通JavaScript”的性能。 – 2013-04-27 09:32:05

一种方法可以做到这一点，像这样：

$('#aboutBtn').click(function(){ 
    $('#home').fadeOut(300); 
    $('#aboutme').delay(400).fadeIn(300); 
});

编辑：以上解决方案更多的是快速修复个别情况下，下面的解决方案是什么样的事情你应该这样做，特别是当你有多个锚/ div。

Here's a working jsFiddle example。

HTML：

<a class="buttonNav" target="1">Home</a> 
<a class="buttonNav" target="2">About</a> 
<a class="buttonNav" target="3">Success</a> 


<div id="div1" class="targetDiv">Home Div</div> 
<div id="div2" class="targetDiv">About Div</div> 
<div id="div3" class="targetDiv">Success Div</div>

CSS：

.targetDiv { 
    display:none; 
    color:red; 
} 

.targetDiv:nth-of-type(1) { 
    display:block; 
}

的jQuery：

$(function(){ 
    $('.buttonNav').click(function(){ 
     $('.targetDiv').fadeOut(); 
     $('#div'+ $(this).prop('target')).delay(400).fadeIn(); 
    }); 
});

这种做法将大大cleane r用于扩展选项的使用，就像你的情况一样。

来源

2013-04-26 19:46:11 lifetimes

为什么在使用'fadeOut'回调函数时使用延迟？ – Ian 2013-04-26 19:47:03

这将是有益的应用类，所以你可以具体淡入淡出。就像在点击时添加一个活动类，这样你就可以淡化当前的活动类，而不是为每个实例制作一个特定的处理程序 - 这个评论是针对OP的。我知道Zenith知道这个 – 2013-04-26 19:47:20

+1，LOL，我刚刚学习了三个新的jQuery函数:)我正要提示'timeOut（）'，'opacity'和'filter：alpha（opacity）'。嗯，不，VoidKing，不！我很高兴看到jQuery引入了这样一种简单的方法来实现可能是一种常见的web设计器请求。 – VoidKing 2013-04-26 19:49:18

可以fadeout的家格在这fadeout的回调可以fadein的关于我格。财产以后这样的：

$('#aboutBtn').click(function(){ 
    $('#home').fadeOut('slow', function(){ 
    $('#aboutme').fadeIn('slow'); 
    }); 
});

这里是FIDDLE

来源

2013-04-26 19:50:38 Raman

我喜欢Zenith的更好，显示你如何设置毫秒 – VoidKing 2013-04-26 19:52:51

@VoidKing ..是的，我们也可以用毫秒代替'慢'。 – Raman 2013-04-26 19:54:41

嗨拉曼，首先，非常感谢您对这么快的配偶评论，非常感谢！我也试过你的方法，但它不工作......当我点击按钮（即aboutBtn）时，它没有做任何事情。不知道该怎么办:( – Mashy 2013-04-26 20:00:03

这里有一个改进的例子：jsfiddle

这个例子可以让你使用同一div为所有链接的容器...

请注意，您应该添加一个HREF为您的链接标签。

玩得开心。

的jQuery：

$('#aboutme').hide(); 

$('#aboutBtn').click(function(){ 
$('#home').fadeOut('slow', function(){ 
    $('#aboutme').text('about me text!!!').fadeIn('slow', function(){ }); 
}); 
}); 
$('#homeBtn').click(function(){ 
$('#home').fadeOut('slow', function(){ 
    $('#aboutme').text('home text button text!!!').fadeIn('slow', function(){ }); 
}); 
}); 
//add other click events for each link.

编辑：调补 - 和节省时间

看到这个jsfiddle

现在你应该只设置一个数组键作为相关链接相同的id并输入他的文字！

玩得开心

来源

2013-04-26 20:10:13

嗨Shlomi，只是想说非常感谢你，因为这工作！我决定采用你的方法，因为它允许我使用相同的div作为所有链接的容器（如你所提到的）。 – Mashy 2013-04-27 18:00:32

好的开心 - 你仍然可以接受答案请参阅我的编辑中的调整 – 2013-04-27 18:27:30

无论是使用jQuery的或纯JavaScript以淡入淡出和

回答

相关问题