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 1: Fading 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
jQuery has made animations very simple. One of the animated effects it supports is fading an element in and out of visibility.

With jQuery it is simply a matter of calling functions to achieve the fading in and the fading out effects for an element.

The following example fades in an otherwise hidden <div> element:

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

When we run the above code the browser only displays the link and the <div> element is not shown, as we have set its CSS display style as display:none. When we click on the link the displayDiv() function is called that uses the fadeIn() function to display the <div> element and its contents. We hardly notice the fading effect in the above example as it is fades in very quickly. In the next example we will learn how to slow down its fading speed

When calling the fadeIn() function, we can specify the duration of the effect in milliseconds, or "fast" or "slow", as a parameter. Passing "fast", is the same as passing a value 200 milliseconds and passing "slow" is the same is passing a value of 600 milliseconds.

Here is an example:

<div id = "fade" style = "background-color:orange; display:none;" >
<h1> Hello world! </h1>
</div>
<br>
<div id = "fade2" style = "background-color:yellow; display:none;" >
<h1> Hello world 2! </h1>
</div>
<br>
<div id = "fade3" style = "background-color:teal; display:none;" >
<h1> Hello world 3! </h1>
</div>

<a href = "javascript:void(0);" onclick = "displayDiv(); " > Display DIV elements</a>
<script type = "text/javascript" >
function displayDiv ()
{
$ ( "#fade" ). fadeIn ("fast");
$ ( "#fade2" ). fadeIn ("slow");
$ ( "#fade3" ). fadeIn (3000);
}
</script>

Run the example above and notice the difference.

jQuery also provides us with a function called fadeOut() that does the reverse of what the function fadeIn() does.

Here is an example:

<div id = "fade" style = "background-color:orange;" >
<h1> Hello world! </h1>
</div>
<br>
<div id = "fade2" style = "background-color:yellow;" >
<h1> Hello world 2! </h1>
</div>
<br>
<div id = "fade3" style = "background-color:teal;" >
<h1> Hello world 3! </h1>
</div>

<a href = "javascript:void(0);" onclick = "hideDiv(); " > Hide DIV elements</a>
<script type = "text/javascript" >
function hideDiv ()
{
$ ( "#fade" ). fadeOut ("fast");
$ ( "#fade2" ). fadeOut ("slow");
$ ( "#fade3" ). fadeOut (3000);
}
</script>

There is a function in jQuery called fadeToggle() that we can use to toggle between fading in and fading out. If an element is hidden, invoking fadeToggle() function will apply the fadeIn() function on it and in case an element is visible, calling the fadeToggle() function will apply the fadeOut() function on it.

Here is an example:

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

Next >>> Lesson No. 11: jQuery Animations 2





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