Fade Div1 In / Out Затем Fade Div2 In?

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, а затем fadein frame2, используя этот код:

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

Answer 2

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

Answer 3

с использованием 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 4

Сначала кадр 2 скрыт, затем скрывается кадр 1 и отображается кадр 2 с этим постепенным исчезновением.

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

Answer 5

Абсолютная позиция обоих делителей относительно div-оболочки, поэтому они накладываются друг на друга, а затем используют функцию обратного вызова из события fadeOut в первом div.

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