CODEWITHSUNDEEP
jqueryajaxcss-transitions
vulgarbulgar
vulgarbulgar

Reputation: 844

fade in and out pages

how is the fade in and out exactly achieved here? have a feeling the site is 'ajaxed' as well.

the fades occur on exit and entrance. smoothly done.

similar to this solution?

fade in can be done with css3 animations if i am not mistaken. could light js be used to trigger a hold and fadeout css anim on exit?

update: just came across this. seems great. any thoughts? how does it compare to the solution used int he first link?

thanks!

Upvotes: 1

Views: 181

Answers (1)

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Let's have simple example how you can do this with jQuery.

Below is the sample html and jQuery code for how to can do fadeIn and fadeOut with ajax.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Title</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">

        $(function()
        {
            $("div#menu ul li a").click(function(e)
            {
                var href = $(this).attr('href');
                e.preventDefault();
                $.ajax({
                    url : href,
                    dataType : 'html',
                    type    : 'get',
                    beforeSend : function()
                    {
                        //code before send request
                    },
                    success : function(htmlResponse)
                    {
                        $('#container').empty().html(htmlResponse).fadeIn('slow');
                    }
                });

            });
        });

    </script>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>

    <div id="container"></div>

</body>
</html>

what i am doing in above example is created sample html with has div with id menu having three li tag having link to each it.

now i created assigned jQuery click event to those link and get their href attribute and send request to that href using jQuery.ajax .

Now on successful response, it will load all the result html inside container div which is created in html.

And you are done you can also add more animations to it but i kept it simple for understanding.

Upvotes: 1

Related Questions