我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#test{
width:100px;
height:100px;
background:#CCC;
}
</style>
<script type="text/javascript">
$(function(){
//$("#test").delay(2000).hide();
$("#test").show(500).delay(2000).hide(500);
//$("#test").show().delay(2000).hide();
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
为什么用我注释掉的两种写法不行?
jQuery文档中已经说明了这个:
Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of
.show()
or.hide()
which do not use the effects queue.
在队列中的事件才能被delay
如果你隐藏的时候用hide,那么显示的时候就要用show.
$("#test").delay(2000).hide();这个为什么不行呢?
我觉得“最佳答案”没答到点上,动画效果本来默认就是在“fx”队列里的,“$("#test").show(500).delay(2000).hide(500);”事实上应该是可行的,我先hide再show的结果是可行。