JqueryUI Switch Class
This chapter will discuss the switchClass()method, which is a useful new class for manipulation. switchClass() method move from one CSS one CSS class to another, animating the transition from one state to the other.
Syntax
Added In Version 1.0 of jQueryUI
The switchClass() method has its basic syntax as follows:
.switchClass( removeClassName,addClassName [, duration ] [, easing ] [, complete ] )
Parameter
Description
removeClassName
This is a String and represents the CSS class name, or space-delimited list of class names, to be removed.
addClassName
This is of type String and represents one or more class names (space separated) to be added to the class attribute of each matched element.
duration
This is of type Number or String and optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, theanimate() method determines the default. Its default value is 400.
easing
The name of the easing function to be passed to theanimate() method.
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 achildren option, which will also animate descendant elements.
.switchClass( removeClassName,addClassName [, options ] )
Parameter
Description
removeClassName
This is a String and represents the CSS class name, or space-delimited list of class names, to be removed.
addClassName
This is of type String and represents one or more class names (space separated) to be added to the class attribute of each matched element.
options
This represents all animation settings. All properties are optional. Possible values are:
duration: A string or number determining how long the animation will run.. Its default value is400.
easing: A string indicating which easing function to use for the transition. Its default value is swing. Possible values arehere.
complete: This is a callback method called for each element when the effect is complete for this element.
children: This is a Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements.
queue: This is of type String/Boolean indicating whether to place the animation in the effects queue..
Examples
The following example demonstrates the use ofswitchClass() method.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Switch Class Example</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">
<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.LargeClass
{
font-family: Arial;
font-size: large;
font-weight: bold;
color: Red;
}
.NormalClass
{
font-family: Arial;
font-size: small;
font-weight: bold;
color: Blue;
}
</style>
<script>
$(function() {
$('#btnSwitch').click(function(){
$(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
$(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
return false;
});
});
</script>
</head>
<body>
<div class="NormalClass">
Sambhaji Word Rocks!!!
</div>
<div class="NormalClass">
Welcome to Sambhaji Word!!!
</div>
<br />
<input type="button" id="btnSwitch" value="Switch Class" />
</body>
</html>
Let's save above code in an HTML fileswitchclassexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:
Sambhaji Word Rocks!!!
Welcome to Sambhaji Word!!!
Click on the Switch Class button to see the effect of classes on the box.
ليست هناك تعليقات:
إرسال تعليق