jQuery

Sliding upwards is easy enough but finding a solution to slide downward seems to be a problem that i encounter. Searching for open source plugin for reference just takes too much time to just find the plugin that perform a downwards slide. My best bet is just brainstorm an idea to make jQuery slide downward.  To my luck, i successfully make my element slide downwards without any big complicated code.  The idea was farely simple, in order to slide downwards, we have to force jQuery to act as if it is sliding downwards. Since jQuery slide element upwards in default, we have no way but to trick the user eyes to make our element pretend to slide downwards. In order to do that, we constantly force our element to move downward while jQuery slide it upwards. This way we get a downward slide from jQuery. Illustrate the following code,

$('div#menu li').each(function() {
oriH = $(this).height();
opac = $(this).css('opacity');
$(this).hover(
function(){
$('div#menu li').not(this).stop(true,false)
.animate({height: '1px', marginTop: oriH+'px'}, options.duration).fadeTo(1,0);
}
,
function(){
$('div#menu li').not(this).stop(true,false).fadeTo(1,opac)
.animate({height: oriH , marginTop: '0px'}, 1500);
});
});

The code above attach an event handler to each object list item in the menu. The event, hover, will slide down all other neighbor list item other than itself. Notice that the animate height is adjusted to height 1px so that elements that are being slide downward do not cause disorder among the list. While, the list items are being pushed upwards, at the same time, we push the margin downwards using the marginTop element.

The goal of this particular jQuery tutorial is to demonstrate how to create a plugin for jQuery. There are actually many ways of building jQuery plugin, but i will prefer this method where i can allow my users to specify some of the optional parameter that they may want to set. Enough of long talk of jQuery, here goes,

step 1

This is one of the default template of jQuery plugin.

(function($){
$.fn.myEffects= function() {

return this.each(function() {

});
};
})(jQuery);

I like this way of setting up my plugin so that i can use the $ sign for jQuery without conflicting with other library that also uses the same sign.

Step 2

Now, We have our jQuery plugin template what i want this plugin to have is the ability to allow other user to change the default options that i have set in the plugin so that it is flexible enough for my user to to change according to their need. We can do this by using jQuery extend method.

(function($){
$.fn.myEffects= function(options) {

var defaults = {
startOpacity: 1,
hoverOpacity: 0,
duration: 2000
};
var options = $.extend(defaults, options);

return this.each(function() {

});
};
})(jQuery);

This way we successfully added the ability for our users to change our plugin default settings.

Step 3

Once our jQuery plugin template has been created, we can add other function into this plugin. The this.each function is important because it will help to iterate all the element specific by the users. For example, if the plugin is being called $("div").myEffect(), all the element of div will be affected by the plugin myEffect. For example, my plugin is to fade all other element other than the element on hover. The plugin will look like this,

(function($){
$.fn.myEffects= function(options) {

var defaults = {
startOpacity: 1,
hoverOpacity: 0,
duration: 2000
};
var options = $.extend(defaults, options);
var selector = this;
return this.each(function() {
$(this).hover(

function(){
$(this).stop(true,true).animate({opacity: options.startOpacity}, options.duration);
$(selector).not(this).stop(true,true).animate({opacity: options.hoverOpacity}, options.duration);
}
,
function(){
$(selector).not(this).stop(true,true).animate({opacity: options.startOpacity}, options.duration);

});

});
};
})(jQuery);

In order to call this plugin, we specify the name of the plugin which is myEffects $(function(){ $('div#menu li').myEffects() ;});

The above declaration will attach an event hover to each menu li with the default settings. Users can change the effects by giving the parameter a object.

$(function(){
$('div#menu li').myEffects({startOpacity: 0.8, hoverOpacity: 0.1})
;});

Its really simple to create a plugin for yourself! Try it! If there is anything you do not understand on this tutorial, please feel free to post these question out! Hope this help! You can download the test files from test-files-for-plug-in-tutorial!