Tutorials Jquery Unordered list sequential fade in and fade out eff............

Unordered list sequential fade in and fade out effect in jquery

April 24,2012 Read: 2179 Times

Hello everyone, welcome to my today's post on Unordered list sequential fade in and fade out effect in jquery. For me it's very interesting one and I'd learned it last day while working in a project and thought to share my scripts with you.

In my last tutorial, you have learned about Create Image Blink with Fade In Effect. Hope you like the nice blinking image effects. You know jQuery provide 2 nice functions for element fade in and fade out. By using this 2 function we can create eye-candy effects for our application. In this tutorial, we are going to learn how to add fade in and fade out effect in a unordered lists and make our list more beautiful and colorful.

We all are known about unordered lists which are defined by ul tag in HTML. Inside this ul tag there may have some li tag also. Basically, unordered list used for showing sort of list like- employees record lists, student attendance lists, student results etc. So, if we've apply some jQuery technique on those lists and present more smartly in-front of our users.

We are going to separate our tutorial in to 3 sections. First on for write some CSS, second on some JavaScript and finally some HTML scripts. I've also added demo and download URL below the tutorial. You can also view my work in live :) So, let's start-

- CSS for unordered lists fade in and fade out effect:

ul#my_unordered_lists{
    list-style: none;          
}
ul#my_unordered_lists li{
    width: 400px;
    display: none;
    border: 1px solid green;
    line-height: 2.5em;
    margin-bottom: 2px;
    text-indent: 5px;
    font-family: verdana;
    font-size: 10px;
}

Have a look, I've create an unordered list which list type is none that means I don't want to show any bullet symbol in list section. In li tag I've define some property like width, line-height and from them most important is display : none section. Because, if we show fade effect then first of all we need to hide our elements.

- JavaScripts for unordered lists fade in and fade out effect:

$(function(){
    $("ul#my_unordered_lists li").each(function(index) {                    
        $(this).delay(100*index).fadeIn(250);
        $("ul#my_unordered_lists li:even").css("background","#cfe9b6");
        $("ul#my_unordered_lists li:odd").css("background","#b0db86");
    });
});

I've pick all my lists inside ul tag. After that use delay function to make some time difference between each row. Inside delay function you can see the value 100 which means 0.1 millisecond and also define time for fade in effect. Finally change the row color of unordered lists to make them beautiful.

- HTML for unordered lists fade in and fade out effect:


    How can I download You Tube Video easily?            
    Free online video chat rooms.
    Download Free Popular Software.
    Free online video chat rooms.
    Download Free Popular Software.
    Free online video chat rooms.
    How to deal with your Freelance clients.
    5 Easy tips for freelance world.
    How to get paid MoneyBookers from Bangladesh.
    Make Money from your blog using Adsense
    How to deal with your Freelance clients.
    5 Easy tips for freelance world.
    How to get paid MoneyBookers from Bangladesh.
    Make Money from your blog using Adsense
    Amazing 10 free web tools for web developers.
    Download Twitter application for Windows Phone.
    Download Free Popular Software.            
    How to deal with your Freelance clients.
    5 Easy tips for freelance world.

Finally, define some HTML code and put some dummy texts inside li tag. That's all. Isn't it simple? Have a look at demo and download URL.

Demo: http://demos.coolajax.net/jquery/sequential_fadein_fadeout/

Download: http://demos.coolajax.net/jquery/sequential_fadein_fadeout/code.zip

You can also check How to convert this jQuery script in to a jQuery plug-in.

I hope you enjoyed my tutorial. Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!