javascript - 如何与 fadeIn 和 fadeOut 同时滑出 a "div"

Question

功能:

当用户点击图像时，当前页面将“slideOut”和“fadeOut”，而新链接页面将同时“SlideIn”和“fadeIn”。

已完成的工作:

我已经成功地分别创建了淡入和淡出效果以及幻灯片插入和滑出效果。

问题:

我如何才能将这两种效果合并到一个方法调用中，以便它可以完成以下功能:同时具有 fadeOut 和 SlideOut 以及 fadeIn 和 SlideIn？

代码:

//淡入函数

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
  });