www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons jQuery Animations 2: Sliding Elements Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
By now you may have realized that how easy and fun it is to animate in jQuery.

In the previous lesson we learned to use the fading effects and in this lesson we are going to learn the sliding effects.

For sliding effects too, jQuery offers has a set of methods. The following example uses the slideDown() function that makes an element slide down:

<div id = "slide" style = "background-color:orange; display:none;" >
<h1> Hello world! </h1>
</div>
<a href = "javascript:void(0);" onclick = "slideTest(); " >Slide DIV element</a>
<script type = "text/javascript" >
function slideTest ()
{
$ ( "#slide" ). slideDown ();
}
</script>

For hiding the <div> element again, the slideUp() method could be invoked. The slideUp() method hides the element in a sliding fashion. The following example demonstrates the usage of slideUp() method:

<div id = "slide" style = "background-color:orange;" >
<h1> Hello world! </h1>
</div>
<a href = "javascript:void(0);" onclick = "slideTest(); " >Slide DIV element</a>
<script type = "text/javascript" >
function slideTest ()
{
$ ( "#slide" ). slideUp ();
}
</script>

There is another sliding method in jQuery called toggleSlide() that toggles the sliding effect. If the element is visible on the screen, it applies the slideUp() effect and in case the element is hidden, it applies the slideDown() effect.

Here is an example:

<div id = "slide" style = "background-color:orange; display:none;" >
<h1> Hello world! </h1>
</div>
<a href = "javascript:void(0);" onclick = "slideTest(); " >Slide DIV element</a>
<script type = "text/javascript" >
function slideTest ()
{
$ ( "#slide" ). slideToggle();
}
</script>

The speed of sliding can be controlled by passing different parameterrs to the sliding methods. We can pass, as parameters, a duration for the effect in milliseconds, or "fast" or "slow". Passing "fast" is the same as passing a value of 200 milliseconds and passing "slow" is the same as passing 600 milliseconds.

Here is an example:

<div id = "slide" style = "background-color:orange; display:none;" >
<h1> Hello world! </h1>
</div><br>
<div id = "slide2" style = "background-color:yellow; display:none;" >
<h1> Hello world 2! </h1>
</div><br>
<div id = "slide3" style = "background-color:teal; display:none;" >
<h1> Hello world 3 ! </h1>
</div>
<a href = "javascript:void(0);" onclick = "slideTest(); " >Slide DIV elements</a>
<script type = "text/javascript" >
function slideTest ()
{
$ ( "#slide" ). slideDown ("fast");
$ ( "#slide2" ). slideDown ("slow");
$ ( "#slide3" ). slideDown (3000);
}
</script>

You may notice the first <div> element appears almost instantly, as and when the link is clicked on, the second <div> is a bit slower and the third one takes full 3 seconds to appear fully.
Next >>> Lesson No. 12: jQuery Custom Animations







Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.