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, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

No comments: