JavaScript-jquery fadeIn和fadeOut问题

Question

<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>

Answer 1

 <script language="javascript" type="text/javascript" src="jQuery-1.7.1.js"></script>
<script type="text/javascript">

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

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

$('#4').bind('click',function(e){
$('#2').fadeOut(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>

Answer 2

你的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/