Question

功能性：

当用户点击图片时，当前页面将“slideOut”和“fadeOut”，而新链接页面将“SlideIn”＆amp;同时“淡出”。

已完成的工作：

我设法创建了fadeIn和FadeOut效果以及slideIn＆amp;单独滑动效果。

问题：

我如何将这两种效果合并到一个方法调用中，以便它可以实现功能：同时具有fadeOut和amp; SlideOut和fadeIn＆amp;的slideIn？

代码：

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

如何滑动＆amp;与fadeIn＆amp;同时出来fadeOut一个“div”

1 个答案: