slideUp & slideDown effects using JQUERY

We have two buttons and one div layer to slideup or slideDown display text.

Our div layer id=d1

<div id=d1 class='msg'>Hide this layer by using buttons</div>
So to slideUp the layer we can use like this
$('#d1').slideUp();
To slideDown this layer we can use like this
$('#d1').slideDown();
We will integrate the slideUp and slideDown effects with the Click event of the buttons
	
$('#b1').click(function(){
$('#d1').slideUp();
})
//////Slide Down ////////
$('#b2').click(function(){
$('#d1').slideDown();
})

Adding speed of transition

We can add optional parameter to speed up or slow down the transition from show to hide or hide to show. We can add these three choice as option.

slow
fast
Time in milliseconds

To slow the sliding up of div layer
$('#d1').slideUp('slow');
To fast the slide down of div layer
$('#d2').slideDown('fast');
To add 5000 milli seconds delay
$('#d3').slideUp(5000);
We can combine the effects of sliding down and use one effect slideToggle().
Visitors Rating
Your Rating




Post your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer