JQuery Fading elements

About JQuery Fading elements

Want to have interesting ways to animate your elements?

This particular animation is fading an element in and out of visibility. You can fade a lot of different elements such as divs, spans, images or links. At first you need to specify the duration of the effect in milliseconds, then it can either be the name of an easing function or a callback function that you may supply, to be called once the effect is done. The last part is to verify if the codes are working! If yes, congratulations! You have just created a new fading animation effect. With this innovative idea, websites can be made more appealing.

[javascript language="css"]<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align: center; display: none;">
<pre>        <b>Hello, world!</b>
</div>
<a href="javascript:void(0);" onclick="ShowBox();">Show box</a>
<script type="text/javascript">
function ShowBox()
{
$("#divTestArea1").fadeIn();
}
</script>[/javascript]

You can fade a lot of different elements, like divs, spans or links. The fadeIn() method can take up to three parameters. The first one allows you to specify the duration of the effect in milliseconds, or “fast” or “slow”, which is the same as specifying either 200 or 600 milliseconds. Here’s an example of it in use:

[javascript language="css"]<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<pre><div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
<a href="javascript:void(0);" onclick="ShowBoxes();">Show boxes</a>
<script type="text/javascript">
function ShowBoxes()
{
$("#divTestArea21").fadeIn("fast");
$("#divTestArea22").fadeIn("slow");
$("#divTestArea23").fadeIn(2000);
}
</script>[/javascript]

Don’t mind all the HTML, it’s just there so that you can see the difference between the fading durations. Now, the second parameter can either be the name of an easing function (which we won’t use in this tutorial) or a callback function that you may supply, to be called once the effect is done. Here’s an example of that, combined with the use of the fadeOut() method, which obviously has the reverse effect of fadeIn():

[javascript language="css"]<div id="divTestArea3" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<script type="text/javascript">
$(function()
{
$("#divTestArea3").fadeIn(2000, function()
{
$("#divTestArea3").fadeOut(3000);
});
});
</script>[/javascript]

There may be situations where you want to fade an element in our out depending on its current state. You could of course check if it is visible or not and then call either fadeIn() or fadeOut(), but the nice jQuery developers have supplied us with a specific method for toggling an element, called fadeToggle(). It takes the same parameters as fadeIn() and fadeOut(), so it’s very easy to use. Here’s a little example:

[javascript language="css"]<div id="divTestArea4" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div><br />
<a href="javascript:void(0);" onclick="ToggleBox();">Toggle box</a>
<script type="text/javascript">
function ToggleBox()
{
$("#divTestArea4").fadeToggle("slow");
}
</script>[/javascript]

And that’s how easy it is to use the fading effects of jQuery.

To get the version of the script integrated within a live template visit the website whose link is mentioned here: Boxedart.com

Interested? Want to keep yourselves updated with the latest JavaScripts and codes? Try this website a1javascripts.com for more jQuery, CSS and HTML5 techniques.

JQuery is a very powerful tool, the more you learn about, more will you be amazed what it is capable of. Stay with us for lot of upcoming articles, Guidelines with plenty of great tutorials, Resources, etc.

Comments are closed