jQuery 淡入/淡出答案

【问题标题】：jQuery fadeIn / fadeOutjQuery 淡入/淡出
【发布时间】：2023-03-27 10:06:01
【问题描述】：

基本上我试图在指定的时间后淡入 div 1 然后淡出。在 div 1 淡出之后，在 div 2 之后不久就会淡入。

$("#title").hide(function(){
  $("#title").fadeIn(5000).next().delay('500', function(){
    $("#title").fadeOut(5000);
    $("#hub").hide(function(){
      $("#hub").fadeIn(5000);
    });
  });
});

【问题讨论】：

标签： jquery html

【解决方案1】：

我建议选择不同的 div，.next() 在这方面是一个有用的函数，在这个例子中可以用来替换对“#hub”的显式引用。

// hide all divs
$( 'div' ).hide()

// fade in: duration 1s on complete call function
$( '#title' ).fadeIn(1000, function(){

    // fade out: duration 1s, on complete call function
    $( '#title' ).fadeOut(1000, function(){

    // fade in: duration 1s
    $( '#hub' ).fadeIn(1000)
  })
})

【讨论】：

【解决方案2】：

我想你正在寻找这个，只需使用 setTimeout 函数：

$(document).ready(function(){
    setTimeout(function(){
         $("#title").fadeIn(2000)
         $("#hub").fadeIn(4000)
        }, 2000);
        setTimeout(function(){
         $("#title").fadeOut(4000)
         $("#hub").fadeOut(2000)
        }, 2000);
});

#hub, #title{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title">Help please.</div>
<div id="hub">not sure what to do</div>

【讨论】：

【解决方案3】：

这里有一个解决方案https://jsfiddle.net/hwyw5ssf/6/

$('div').hide();
$('#title').fadeIn("slow", function(){
  $(this).fadeOut("slow", function(){
    setTimeout(function(){
      $('#hub').fadeIn("slow");
    }, 2000);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title">Help please.</div>
<div id="hub">not sure what to do</div>

第一个 div 将立即fadeOut，第二个 div 将在第一个 div 的2sec 之后fadeout。

对于 2 秒的间隔，我使用了 setTimeout

希望这会对你有所帮助。

【讨论】：

这只是将两个 div 淡出，我正在尝试淡入 div 1 然后将其淡出。 div 1 在短时间内淡出后，div 2 淡入。