Need help about jQuery transition effect on page exit

Asked By 10 points N/A Posted on -
qa-featured

Hi guys,

I want to make some effect when leaving page by using jquery. Please show me in details on how to make jquery transition effect on page exit, or give which website can fulfill my need.

Thanks

Windows mobile 6.1 utility ssh, need to have a free SSH/Telnet Client

SHARE
Answered By 0 points N/A #133335

Need help about jQuery transition effect on page exit

qa-featured

Hello,

To set JQuery  transition effects on page exit, you can simply use CSS for style and JavaScript. Set the CSS to display: none as shown.

body { display: none; }

This stops all the visual elements contained in the body from loading, initially “hiding” everything. To prevent a visitor’s page having JavaScript disabled from failing to load, add the display:none CSS property using jQuery. If visitors have JavaScript disabled, they will still be able to see the body content.

<script type="text/javascript">

    $(document).ready(function() {

        $("body").css("display", "none");

    });

</script>

Now we can add some fade-in effects and give a time instance when the fade-in takes place.

<script type="text/javascript">

$(document).ready(function() {

    $("body").css("display", "none");

 $("body").fadeIn(2000);

 $("a.transition").click(function(event){

        event.preventDefault();

        linkLocation = this.href;

        $("body").fadeOut(1000, redirectPage);    

    });

    function redirectPage() {

        window.location = linkLocation;

    }

});

</script>

Thank you.

Related Questions