JavaScript change page effect

Question

Hi by any chance anyone will know how to do the fade in fade out change page effect in JavaScript?

Like this.. http://soulwire.co.uk/hello

I have tried this..

But when fadeout is not linking together..I mean not smooth like the above website.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>





<script type="text/javascript">

$(document).ready(function() {

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

$('body').fadeIn(1000);



$('.link').click(function() {

event.preventDefault();

newLocation = this.href;

$('body').fadeOut(2000, newpage);

});

function newpage() {

window.location = newLocation;

}

});
</script>

Sorry am just think of....does background slideshow will work??? But on top can I add php/html code?

Another example...http://www.louisebradley.co.uk/portfolio/

hey do you want to fade out after 2 sec.....is that what you want — Nidhish Krishnan, Aug 08 '13 at 04:19
Ummm...when clicking on the menu button, "HELLO , EXPERIMENTS, STREAM ,NODES" the picture with move up, is that java script? — S Alien, Aug 08 '13 at 04:23

score 0 · Answer 1 · edited May 23 '17 at 10:25

Hey try the below code

See its WORKING DEMO

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="jquery.js"></script>
        <script type="text/javascript">

        function Close()
        { 
            $('#div1').animate({ height: 50 });
        }

        function Open()
        { 
            $('#div1').animate({ height: 100 });
        }
        </script>
    </head>
    <body>

        <div id="div1" style="width:100%; height: 50px; background-color: #C0C0C0;" onmouseover="Open()" onmouseout="Close()"></div>
</body>


</html>

Also take a look at these stuffs

Fade in div on page load

JavaScript Fade Tutorial – Fading Elements In/Out

How to: javascript fade in fade out text

.fadeIn() Tutorial

JavaScript change page effect

1 Answers1