CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5534633
user5534633

Reputation:

How to fade out then direct to a new page

I was just wondering how to fade out the page when clicked and open up another html page. Right now I have

<div class="menu-item color">
  <a href="html/webmap.html">
    <i class="fa fa-flask"></i>
    <p>Webmap</p>
  </a>
</div>

How can I make it so that when "Webmap" menu item is clicked, the page fades out and opens up my webmap.html page?

I know javascript is invovled, I just can't figure it out!

Thanks in advance!

Upvotes: 0

Views: 119

Answers (1)

Shikkediel
Shikkediel

Reputation: 5205

Not a whole lot to explain :

$(function() {

  $('.menu-item a').click(function() {

    var destination = this.href;

    $('body').fadeOut('slow', function() {

      window.location = destination;
    });

    return false;
  });
});

Upvotes: 2

Related Questions