Fade Div1 In / Out然后Fade Div2 In？

Question

我正在尝试在“ frame2”被隐藏的同时在div中“淡入”，然后当“ frame1”淡出时我希望“ frame2”在淡入“ frame1”时淡入。 我尝试搜索，但是还没有走运，因为我遇到的大多数都是onclick事件。

<div id="frames">
    <div id="frame1">
        <p>first text to appear here</p>
    </div>
    <div id="frame2">
        <p>second text to appear here after first text fades out</p>
    </div>
</div>

Answer 1

如果显示了frame1并隐藏了frame2，则可以使用以下代码淡入frame1，然后淡入frame2：

$(document).ready(function(){
  $("#frame1").fadeOut('slow', function(){
    $("#frame2").fadeIn('slow');
  });
});

Answer 2

两个div相对于包装div的绝对位置，以便它们重叠，然后在第一个div中使用fadeOut事件中的回调函数。

$('#frame1').fadeOut('fast', function(){
    $('#frame2').fadeIn('fast'); // Callback
});

Answer 3

首先，隐藏第2帧，然后隐藏第1帧并显示第2帧，其中此淡出淡入。

 $("#frame1").fadeOut('slow', function(){
 $("#frame2").fadeIn('slow');
 });

Answer 4

使用jQuery .fadeTo（）

$('#frame1').fadeTo('slow', 1, function() {
  $('#frame2').fadeTo(600, 0);
});

• 持续时间：以上示例为slow和600 （字符串或数字，以毫秒为单位）
• 不透明度：上面的示例为1和0 （数字范围为0-1）

要么

使用jQuery .fadeIn（）和.fadeOut（）

$("#frame1").fadeOut('fast', function(){
  $("#frame2").fadeIn(100);
});

• 持续时间：以上示例为fast和100 （字符串或数字（以毫秒为单位））

Answer 5

$('#frame1').fadeOut('slow');
$('#frame2').delay('slow').fadeIn('slow');