Please note, I have provided a full example of this in a later post here
I’ve spent a couple of months working with jQuery now and have grown to like it. For a sales pitch recently I used jQuery to put together a few forms and have been impressed by its power.
Here’s a quick example of a sliding div element.
<script>
jQ(document).ready(function(){$(“#div1″).slideUp(’slow’, function(){
$(“#div2″).slideDown(’slow’);
});});
</script>
And the HTML:
<html>
<body>
<div id=’div1′>div 1</div>
<div id=’div2′ style=’display:none;’>div 2</div>
</body>
</html>
This will result in div1 sliding up and div2 sliding down into its place on completion of the page load.
The jQuery will execute as follows:
- Firstly th script will wait for the document to be ready (loaded)
- It will then slide div1 up slowly
- Only on completion of div1 sliding up will div2 slide down
As you can see div1 only slides up once the document has loaded and div2 will only slide down once div1 has completed its ’slide up’. This takes all those handcrafted JS time delays out of the code – making things much much nicer 
16 March, 2007 at 8:31 am |
[...] CSS manipulation with jQuery – sliding div elements « Chris Gaskell’s Blog: [...]
19 March, 2007 at 10:59 am |
[...] Div Elements. A Full Example Follow-Up A while ago I wrote an article showing how you could build a basic sliding div element using the JQuery library. I have had many [...]
14 May, 2009 at 5:44 am |
Hello,
Seems like you know alot about JSlider and may be able to help me?
Im trying to install it on my website. http://www.ocwebgurus.com. right where it says want a website that gets you noticed?.. well it gets messed everytime i do it. Ive tried many times and im pretty good at just re testing it but it wont give. Any help would be lovely
3 June, 2009 at 3:20 pm |
Thank you … this has me very helped.
7 October, 2009 at 8:46 am |
Thanks for a good post.