jQuery 1.4.4 fadeToggle() function

So far, we have been using the slideToggle() and toggleClass() functions. The new jQuery 1.4.4 now introduces the fadeToggle() function.

fadeToggle() provides built in toggle to fade-in fade-out animations. It fades in or fades out the matched elements opacity, without the need for us to check the visibility of the elements.

Here’ a simple example:

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head>
<
title>jQuery fadeToggle() - DevCurry.com</title>
<
script type="text/javascript"
src="http://code.jquery.com/jquery-1.4.4.js">
</
script>
<
script type="text/javascript" language="javascript">
$(function () {
$("#btn").click(function () {
$("#para").fadeToggle("slow", "linear");
});
});
</script>
</
head>
<
body>
<
input value="Click Same Button to Fade-In Fade-Out"
id="btn" type="button" /> <br /><br />
<
p id="para">The .fadeToggle() method animates the opacity
of the matched elements. When called on a visible element,
the element's display style property is set to none once the
opacity reaches 0, so the element no longer affects the layout
of the page.</p>
</
body>
</
html>

image

See a Live Demo



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

No comments: