How to slideIn& Out simultaneously with fadeIn & fadeOut a "div"

1
votes

Functionality:

When a user click on an image, the current page will "slideOut" and "fadeOut", while the new link page will "SlideIn" & "fadeIn" simultaneously.

What has been done:

I have managed to create the both fadeIn and FadeOut effect and the slideIn & SlideOut effect separately.

Issue:

How am I possible to incorporate both of the effect into one method call such that it can accomplish the functionality: To have both fadeOut & SlideOut and fadeIn & SlideIn?

Code:

//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>

//Slide Function

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>
1
javascriptjqueryfadeinfadeoutslidetoggle

1 Answers

0
votes

You have to use .animate() for that

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