Question

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

淡入Div1输入/输出然后淡入Div2输入？

5 个答案: