如何与淡入淡出同时滑出一个“div”

Question

功能：

当用户点击图片时，当前页面会“滑出”和“淡出”，而新的链接页面会同时“滑入”和“淡入”。

做了什么：

我已经设法分别创建了淡入淡出效果和滑入和滑出效果。

问题：

如何将这两种效果合并到一个方法调用中，以便它可以完成以下功能：同时具有淡出和幻灯片输出以及淡入和幻灯片入？

代码：

//FadeInFunction

function RhythmsWeekly() {
  console.log("RhythmsWeekly");
  $("#LifeExplo").fadeOut(2000, function() {
    $("#RhythmsWeeklyPage").fadeIn(2000);
  })
}

<div id="LifeExplo" align="center" style="background-image: url(lib/img/Background.png); width:1920px; height:1080px; z-index=1;">
  <input id="RhythmsWeekly" type="image" src="lib/img/Buttons-02.png" onclick="RhythmsWeekly()" />
</div>

<div id="RhythmsWeeklyPage" align="center" style="background-image: url(lib/img/VideoBackGround.png); width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=2; ">
  <input id="PageBack" type="image" src="lib/img/VideoBackButton.png" onclick="Page()" />
</div>

//滑动功能

function RhythmsWeekly() {
  console.log("RhythmsWeekly");

  $("#LifeExplo").slideToggle(2000, function() {
    $("#RhythmsWeeklyPage").slideToggle(2000);
  })
}

<div id="LifeExplo" align="center" style="background-image: url(lib/img/Background.png); width:1920px; height:1080px; z-index=1;">
  <input id="RhythmsWeekly" type="image" src="lib/img/Buttons-02.png" onclick="RhythmsWeekly()" />
</div>

Answer 1

您必须为此使用.animate()

//TO FADE OUT AND SLIDE OUT AT THE SAME TIME
$("#LifeExplo").animate({
    opacity: 0,
    height: '0'
  }, 5000, function() {
  //CODE AFTER ANIMATION COMPLETES
  });