jquery hide,show方法问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery hide,show方法问题相关的知识，希望对你有一定的参考价值。
有AB 2个层，B在A里面，初始display都是none，首先是显示效果，A.show()后B.show('500'); 效果正常：A层先显示，B层以500的速度匀速逐渐显示
但是隐藏出现了问题，希望达到的效果是B层先以500的速度hide，然后A再hide，但无论如何顺序，都是AB一起瞬间都隐藏掉了，请问有没有办法在隐藏的时候，让B确实先执行完.hide('500')后再让A.hide()？
首先来看个段落文字的显示和隐藏
1：show() 方法
显示出隐藏的 <p> 元素。代码如下：
$(".btn2").click(function()
$("p").show();
);
2：hide()隐藏可见的 <p> 元素：代码如下：
$(".btn1").click(function()
$("p").hide();
);
3：jQuery代码如下：
$("element").show("slow");
运行该代码后，元素将在600毫秒内慢慢的显示出来。其它的速度关键字还有”normal“和”fast“（长度分别是400毫秒和200毫秒）。
不仅如此，还可以为显示速度指定一个数字，单位是毫秒。
例如，使用如下代码使元素在1秒钟（1000毫秒）内显示出来；
$(”element").show(1000);在前面的例子中，把其中的hide()方法改为hide(600),show()方法改为show(600)。
jQuery代码如下：
$(function ()
$("#panel h5.head").toggle(function ()
$(this).next().hide(600);
, function ()
$(this).next().show(600);
)
);
从代码的执行过程中，可以发现，hide(600)方法会同时减少“内容”的高度、宽度和不透明度，直至3个属性的值为0，最后设置该元素的CSS规则为“display:none”。
然后我们再来看个简单的代码：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
$(".btn1").click(function()
$("p").hide();
);
$(".btn2").click(function()
$("p").show();
);
);
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
这个就是超简单的显示与隐藏了，如果要有效果我们只要在hide或show中带时间或参数即可：
代码如下：
<script type="text/javascript">
$(document).ready(function()
$(".btn1").click(function()
$("p").hide(1000);
);
$(".btn2").click(function()
$("p").show(1000);
);
);
</script> 参考技术A show, hide 都有 callback 函数，callback 就是在一个动作完成之后【再】执行的函数
$("#divB").hide(500, function()
$("#divA").hide();
);本回答被提问者采纳 参考技术B $(b).hide(500,function()
$(a).hide();
) 参考技术C 需要用animate自定义动画
如何在 Jquery 中将 delay() 与 show() 和 hide() 一起使用
【中文标题】如何在 Jquery 中将 delay() 与 show() 和 hide() 一起使用【英文标题】：How can I use delay() with show() and hide() in Jquery 【发布时间】：2011-05-29 08:41:32 【问题描述】：如何在 Jquery 中将 delay() 与 show() 和 hide() 一起使用？
【问题讨论】：
【参考方案1】：将持续时间传递给show()和hide()：
当提供持续时间时，
.show()成为动画方法。
例如element.delay(1000).show(0)
DEMO
【讨论】：
【参考方案2】：来自 jquery api
在 1.4 版中添加到 jQuery，.delay() 方法允许我们延迟执行队列中跟随它的函数。它可以与标准效果队列或自定义队列一起使用。只有队列中的后续事件被延迟；例如，这不会延迟不使用效果队列的.show() 或.hide() 的无参数形式。
http://api.jquery.com/delay/
【讨论】：
【参考方案3】：你为什么不试试 fadeIn() 而不是使用带有 delay() 的 show()。 我认为你正在尝试做的事情可以用这个来完成。 这是 fadeIn 和 FadeOut() 的 jQuery 代码，它还具有用于延迟进程的内置方法。
$(document).ready(function()
$('element').click(function()
//effects take place in 3000ms
$('element_to_hide').fadeOut(3000);
$('element_to_show').fadeIn(3000);
);
【讨论】：
淡入和延迟显示是完全不同的两件事【参考方案4】：最简单的方法是使用 jquery 制作“假节目”。
element.delay(1000).fadeIn(0); // This will work
【讨论】：
这是一场“假”秀吗？为什么不直接使用.show(0)？以上是关于jquery hide,show方法问题的主要内容，如果未能解决你的问题，请参考以下文章
JQuery .show() 方法在 .hide 之后不起作用