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>
See a Live Demo
Tweet
About The Author
No comments:
Post a Comment