javascript - jQuery hide/show方法同时使用时的问题

Question

<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(2000).show();
});
});
</script>
<p>jQuery is fun!!</p>
<button>Click me</button>

执行代码，预期p元素会先隐藏再显示，但实际是p元素被隐藏后再无法显示，但如果show方法带有speed参数，如show(1)，则会先隐藏再显示。
如果上面代码中的hide和show分别替换成slideUp和slideDown，或fadeOut和fadeIn，则没有这个问题。
请问这是为什么呢？

Answer 1

先给来源： .show()
代码不明查api

With no parameters, ...... The matched elements will be revealed immediately, with no animation.

When a duration, a plain object, or a "complete" function is provided, .show() becomes an animation method.

简而言之，无参数的.show()就是直接设置display而非动画，有参数时则是动画。.hide()同。

动画与非动画是两个完全不同的过程，动画会在show/hide命令执行时向当前动画序列写入指令而后由动画序列管理并依次执行，非动画则在show/hide命令执行时直接执行display设置。

题主所提slide和'fade`系列命令都是动画命令。

Answer 2

手机写不方便。因为2秒后隐藏肯定是通过定时器异步执行的，所以hide要比show后执行完，所以最后肯定是看不见的。要实现你的想法，得使用回调，如下

$('p').hide(2000, function(){
  $(this).show();
});

至于给show加了时间会显示，应该是因为jquery内部维护了一个定时器队列，让各个定时器顺序执行吧。

Answer 3

估计是jquery本身的问题。$("p").hide(2000).show();执行完毕后，元素被设置为display:none;
但是show()一旦加入了时间，元素最后被设置为display:block;