Tutorial: How to slide downwards with 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.

Like this post? Share it!

No related posts.