CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5534633
user5534633

Reputation:

How to fade out a page then direct to a new page

I was just wondering how to fade out a page then open up another html page. Right now I have:

<div class="close" onclick="window.location.href='../index.html';">
    <div class="lr">
        <div class="rl"></div>
    </div>
    <script>
        $(function() {
          $('.close a').click(function() {
            var destination = this.href;
            $('body').fadeOut(2000, function() {
                window.location = destination;
              });
            });
            return false;
          });
        });
    </script>       
</div>

I want it so that when "close" is clicked, the page fades out then then opens up my index.html page?

Currently my code is not working :(.

Thanks in advance!

Upvotes: 1

Views: 2597

Answers (4)

Nenad Vracar
Nenad Vracar

Reputation: 122057

Try this

HTML 

<div class="close" data-link="https://www.youtube.com">
    <div class="lr">
        <div class="rl">LOREM IPSUM DOLORs</div>
    </div>
</div>

JS

$('.close').click(function() {
    var destination = $(this).data("link");
 $("body").fadeOut(1000,function(){
       window.location.replace(destination);
    });
});

Upvotes: 1

damiano celent
damiano celent

Reputation: 709

 $(document).ready(function() {
 $(window).bind("unload", function() {
 });
 $("body").css("overflow", "scroll");
 $("body").fadeIn(2000);
 $("a.transition").click(function(event){
 event.preventDefault();
 linkLocation = this.href;
 $("body").fadeOut(1500, redirectPage);      
 });

function redirectPage() {
    window.location = linkLocation;
}
});

Live example:

www.damianodesign.com

Upvotes: 0

Fernando Chavez Herrera
Fernando Chavez Herrera

Reputation: 93

Your JavaScript has an extra closing bracket and closing parenthesis. You are also missing your a

<div class="close">
<a href="/index.html">Click Here</a>
<div class="lr">
    <div class="rl"></div>
</div>
<script>
     $(function() {
         $('.close a').click(function(e) {
             e.preventDefault();
             var destination = this.href;
             $('body').fadeOut(2000, function() {
                 window.location = destination;
             });
         });
         return false;
     });
</script>

JS Fiddle: https://jsfiddle.net/4wz9uqwd/

Upvotes: 0

Anthony N.
Anthony N.

Reputation: 295

There is no a tag in your html. This code should work. 

    <div class="close" onclick="window.location.href='../index.html';">
        <div class="lr">
            <div class="rl"></div>
        </div>
        <script>
            $(function() {
              $('.close').click(function() {
                var destination = this.href;
                $('body').fadeOut(2000, function() {
                    window.location = destination;
                  });
                });
                return false;
              });
            });
        </script>       
    </div>

Upvotes: 0

Related Questions