http://www.dewen.net.cn/q/16042/jquery fadeIn和fadeOut问题

http://www.dewen.net.cn/q/16042/jquery fadeIn和fadeOut问题

Zhen
2 票
Zhen 29
<script type="text/javascript">

$(function() {
$('#2').fadeOut();

$('#3').bind('click',function(e){
$(this).parent().fadeOut().delay(800,function(){$('#2').fadeIn('slow');});
});

$('#4').bind('click',function(e){
$(this).parent().fadeOut().delay(800,function(){$('#1').fadeIn('slow');});
});
});

</script>

<div id="1">
<button id="3">fadeOut div1</button>
</div>
<div id="2">
<button id="4">fadeOut div2</button>
</div>

如代码，点击第1个按钮-->淡入第2个层,淡出第1个层

点击第2个按钮-->淡出第2个层，淡入第1个层

实际运行时，点击第2个按钮，第一个层并没有显示出来，是bug么？

评论 (0) • 举报 (0) • 分享 • 链接 • 2014-02-10　
添加评论...
2个答案 票 数
brayden认证专家
1 票
brayden6562
你的js代码有问题. 注意看jquery.delay的文档, delay的定义为:

.delay( duration [, queueName ] )

Description: Set a timer to delay execution of subsequent items in the queue.

是延迟队列中的下一个事件的执行. 这里的队列是jquery里的队列, 默认为fx, the standard effects queue. 下面的代码是可以实现你的要求:

$(function() {
$('#2').fadeOut();

$('#3').bind('click',function(e){
$(this).parent().fadeOut().delay(800);
$('#2').fadeIn('slow');
});

$('#4').bind('click',function(e){
$(this).parent().fadeOut().delay(800);
$('#1').fadeIn('slow');
});
});

http://jsfiddle.net/WEY53/