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

No comments:

Post a Comment