函数的jQuery fadeOut() fadeIn()
函数的jQuery fadeOut() fadeIn()
提问于 2014-10-25 22:46:17
我想要一个淡出效果，在过渡期间，我的文字。但我不知道怎么做？我必须将fadeIn()放在html方法中吗？干杯
我必须添加更多的文本，因为网站要求我提供它。
$(document).ready(function(){
$("#b1").click(function(){
$("#container")
$("#container").html($("#page1").html());
});
$("#b2").click(function(){
$("#container").html($("#page2").html());
});
$("#b3").click(function(){
$("#container").html($("#page3").html());
});
});li {
display: inline
}
#page2 {
display: none;
}
#page3 {
display: none;
}
#page1 {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>NAV BAR</p>
<nav>
<ul>
<li><button id="b1">PAGE1</button></li>
<li><button id="b2">PAGE2</button></li>
<li><button id="b3">PAGE3</button></li>
</ul>
</nav>
<div id="container"></div>
<div id="page1">
<p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p>
</div>
<div id="page2">
<p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p>
</div>
<div id="page3">
<p>00010111011010</p><p>00010111011010</p><p>00010111011010</p><p>00010111011010</p><p>00010111011010</p><p>00010111011010</p>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-10-25 22:51:23
一旦元素可见，您将需要隐藏它，或首先淡出它。
所有的jQuery动画都有完整的回调，所以您可以做类似的事情。
$("#container").fadeOut(function(){
/* container is now hidden so change the html and fade it back in */
$(this).html($("#page1").html()).fadeIn();
});为了更快地隐藏起来，你可以把所有的东西都锁起来：
$("#container").hide().html($("#page1").html()).fadeIn();Stack Overflow用户
发布于 2014-10-26 00:26:01
哟不需要用jquery插入内容..。
我建议您将内容留在容器中，并使用css使#pages {display:none；}。
然后单击事件调用两个函数：
首先:隐藏所有#页面。
第二:使用jquery中的fadeToggle ()函数来显示元素。
Stack Overflow用户
发布于 2014-10-26 00:36:27
这会给你一个进/出的效果。
$(document).ready(function(){
$("#b1").click(function(){
$("#container").fadeOut(function() {
$(this).html($("#page1").html()).fadeIn();
});
});
// and so on...
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26568040
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号