Jquery 淡入/淡出Div1，然后淡入Div2？

我试图在“frame2”隐藏时淡入div“frame1”，然后当“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>

此处显示的第一个文本

第一个文本淡出后出现在此处的第二个文本

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

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

---

绝对定位两个div相对于包装器div的位置，使它们重叠，然后在第一个div中使用淡出事件的回调函数

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

---

首先，隐藏第2帧，然后隐藏第1帧，并使用此淡入淡出显示第2帧

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

使用jQuery

• 持续时间：上面的示例为

  slow

  和

  600

  （以毫秒为单位的字符串或数字）
• 不透明度：上述示例为

  1

  和

  0

  （数字范围为0-1）

或

使用jQuery和

• 持续时间：上述示例为

  fast

  和

  100

  （以毫秒为单位的字符串或数字）

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

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

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