This chapter will discuss the removeClass() method, wh ich is one of the methods used to manage jQueryUI visual effects. removeClass() method removes the applied classes from the elements.
removeClass() method removes the specified classes to the matched elements while animating all style changes.
Click on the Add Class and Remove Class buttons to see the effect of classes on the box.
removeClass() method removes the specified classes to the matched elements while animating all style changes.
Syntax
Added In Version 1.0 of jQueryUI
The removeClass() method has its basic syntax as follows −.removeClass( className [, duration ] [, easing ] [, complete ] )
| Sr.No. | Parameter & Description |
|---|---|
| 1 | className This is a String containing one or more CSS classes (separated by spaces) to be removed. |
| 2 | duration This is of type Number or String, and indicates the number of milliseconds of the effect. A value of 0 takes the element directly in the new style, without progress. Its default value is 400. |
| 3 | easing This is of type String and indicates the way to progress in the effect. Its default value is swing. Possible values are here. |
| 4 | complete This is a callback method called for each element when the effect is complete for this element. |
Added In Version 1.9 of jQueryUI
With version 1.9, this method now supports a children option, which will also animate descendant elements..removeClass( className [, options ] )
| Sr.No. | Parameter & Description |
|---|---|
| 1 | className This is a String containing one or more CSS classes (separated by spaces). |
| 2 |
options This represents all animation settings. All properties are optional. Possible values are −
|
Examples
The following example demonstrates the use of removeClass() methods.Passing single class
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>jQuery UI removeClass Example</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> .elemClass { width: 200px; height: 50px; background-color: #b9cd6d; } .myClass { font-size: 40px; background-color: #ccc; color: white; } </style> <script type = "text/javascript"> $(document).ready(function() { $('.button').click(function() { if (this.id == "add") { $('#animTarget').addClass("myClass", "fast") } else { $('#animTarget').removeClass("myClass", "fast") } }) }); </script> </head> <body> <div id = animTarget class = "elemClass"> Hello! </div> <button class = "button" id = "add">Add Class</button> <button class = "button" id = "remove">Remove Class</button> </body> </html>Let us save the above code in an HTML file removeclassexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Click on the Add Class and Remove Class buttons to see the effect of classes on the box.
No comments:
Post a Comment