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!

Related posts:

1. Tutorial: jQuery effect – how to shrink/zoom at the center of a container A tutorial to demonstrate and explain how can element be...
2. Tutorial: How to create your own continuously slide effect plugin with jQuery In this tutorial, i will explain the concept and code...
3. Tutorial: How to Create your own jQuery Flip effect plugin A jQuery tutorial to demonstrate how jQuery flip effect work...
4. Tutorial: How to create a jQuery plugin in 3 steps A very simple and quick tutorial to demonstrate how to...
5. Tutorial: jQuery Fold Effect Concept And Explanation A simple concept on how fold effect work in jQuery....

Author: Clay Lua

Clay is the main writer and founder of Hungred.com. A person who thinks a lot and spend majority of his time online. He spend most of his time developing web application and writing articles to share and learn. You can find him at his twitter.