Tutorials Jquery How to create a fading effect jquery plugins

How to create a fading effect jquery plugins

April 26,2012 Read: 827 Times

Hello everyone, welcome my today's post on "Create a fading effect jquery plugins". In my last tutorial we learned "How to create a Unordered list sequential fade in and fade out effect in jquery". Hope you enjoyed that tutorial. Today we are going to learn how to convert simple jquery code in to a jQuery plugins. So, that we can easily use this plugins anywhere in our application or website.

After reading this tutorial you can convert any jQuery scripts in to a plugins and use them anywhere you want. That means, it's also a tutorial about "How to create you first jQuery plugins". I'm going to divide this tutorial in to 4 sections.

- Write the body section for fading plugins.

- How to integrate plugins in our application.

- How to use fading plugins.

- Finally, Add some styling and body scripts.

So, lets start -

- Write the body section for fading plugins:

(function($){

    $.fn.fadeeffect = function(options){

    var defaults = {  
        delay_time: 100,  
        fade_time: 250,
        background: "#cfe9b6"
    };
    var options = $.extend(defaults, options);

    $(this).each(function(index) {                    
        $(this).delay(options.delay_time*index).fadeIn(options.fade_time).css({
            "background":options.background
        });

    });

    return this;
};

})(jQuery);

First of all we need to learn the convention how to write a plugins. Always start code with following codes.

(function($){

// Write you plugins code in here.

})(jQuery);

Now you need to give a name of plugins. As for example we give our plugins name "fadeeffect". Remember plugins is a function that uses globally. After setting name of plugins we write some default property of our plugins like delay time of animation, fade time and background color. You can set this property when you call this "fadeeffect" function. We will see at the bottom of the tutorial.

Then we use extend for override our default behavior. If you set delay time, fade time and background color then extend will override plugins default behavior. Finally we create a fading effects and then return it.

- How to integrate plugins in our application:

- How to use fading plugins:

$(function(){            
    $("ul#my_unordered_lists li").fadeeffect({
        delay_time: 100,  
        fade_time: 1500,
        background: "lightpink"
    });
});

You can see that, I've only set an unordered list where fading effect will apply and then set delay time, fade time and background colors.

- Add some styling and body scripts:

Now we need to add some css code for styling.

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;
}

Finally add some ul and li in body section.


    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.

We are done! Our plugins now ready for use and you can check output live in below :)

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

Download: http://demos.coolajax.net/jquery/fadein_fadeout_plugins/plugins.zip

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!