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

问题描述

问 题

<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，则没有这个问题。
请问这是为什么呢？

解决方案

先给来源： .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`系列命令都是动画命令。

这篇关于javascript - jQuery hide/show方法同时使用时的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！