jQuery switchClass()
jQuery Tutorial » jQuery switchClass()
What is jQuery switchClass()?
jQuery switchClass () method is used to add and remove a certain class of appropriate items, while animating all style changes. The jQuery switchClass () method is a method built into the jQuery UI library.
Syntax:
switchClass(removeClass_Name, addClass_Name [, options ]);
Parameters:
- removeClass-Name: specifies the name of one or more CSS classes to be removed and is passed as a string.
- addClass-Name: specifies the name of one or more CSS classes added to each matched item attribute and is passed as a string.
- options: specifies the animation settings as:
- duration: specified the time duration in a millisecond
- easing: specified the name of the easing function to be called to the animate() method.
- complete: specified the name of a callback function which is to be called when each item effect is completed.
- children: specified the animation applies to all descendants or not of the match item and passed as a Boolean. default value is FALSE.
- queue: specified an animation is put in the effects queue or not and passed as a Boolean or string. Default value is TRUE.
jQuery UI switchClass() Method
In the next example, wherein the switchClass () method will be used to change the style class of the specified item of the selected item, as below.
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery switchClass() method </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>
.s11 {
width : 200px;
background-color : #ccc;
color : #009;
padding: 10px;
}
.s22 {
width : 200px;
background-color : #F00;
color : #FFF;
padding: 10px;
}
</style>
<script>
$(document).ready(function() {
$('#Switch').click( function() {
$( "h2" ).switchClass( "s11", "s22", "easeInOutQuad" );
});
});
</script>
</head>
<body>
<h2 class = "s11"> This is an sample of jQuery switchClass() item to change the style class. </h2>
<input type="button" id="Switch" value="Switch Class" />
</body>
</html>
<html lang="en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery switchClass() method </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>
.s11 {
width : 200px;
background-color : #ccc;
color : #009;
padding: 10px;
}
.s22 {
width : 200px;
background-color : #F00;
color : #FFF;
padding: 10px;
}
</style>
<script>
$(document).ready(function() {
$('#Switch').click( function() {
$( "h2" ).switchClass( "s11", "s22", "easeInOutQuad" );
});
});
</script>
</head>
<body>
<h2 class = "s11"> This is an sample of jQuery switchClass() item to change the style class. </h2>
<input type="button" id="Switch" value="Switch Class" />
</body>
</html>
Related subjects:
jQuery slideUp
jQuery fadeout
Effects hide / show
jQuery selectors
Tags: jQuery switchClass is not a function, not working, toggleclass, animate, remove all classes
switchClass() method to change back style class - Example
In the following example, we rewrite the code above where jQuery UI switchClass () method is used to change then change back the style class as in the below code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery switchClass() method</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>
.s11 {
width: 250px;
background-color: #EBEBEB;
color : #00C;
padding: 10px;
}
.s22 {
width: 250px;
background-color: #F00;
color : #FFF;
padding: 10px;
}
</style>
<script>
$(document).ready(function() {
$('#Switch').click( function() {
$( "h3" ).switchClass( "s11", "s22", "fast" );
});
$('#Switchback').click( function() {
$( "h3" ).switchClass( "s22", "s11", "fast" );
});
});
</script>
</head>
<body>
<h3 class = "s11">This is an sample heading jQuery switchClass() item to change the style class. </h3>
<input type="button" id="Switch" value="Switch Class" />
<input type="button" id="Switchback" value="Switch Back to Previous Class" />
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery switchClass() method</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>
.s11 {
width: 250px;
background-color: #EBEBEB;
color : #00C;
padding: 10px;
}
.s22 {
width: 250px;
background-color: #F00;
color : #FFF;
padding: 10px;
}
</style>
<script>
$(document).ready(function() {
$('#Switch').click( function() {
$( "h3" ).switchClass( "s11", "s22", "fast" );
});
$('#Switchback').click( function() {
$( "h3" ).switchClass( "s22", "s11", "fast" );
});
});
</script>
</head>
<body>
<h3 class = "s11">This is an sample heading jQuery switchClass() item to change the style class. </h3>
<input type="button" id="Switch" value="Switch Class" />
<input type="button" id="Switchback" value="Switch Back to Previous Class" />
</body>
</html>
switchClass() change back style with duration parameter
In the next example, wherein the switchClass () method will be used to change the style class of the specified item of the selected item with duration parameter as below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery switchClass() method</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>
.s11 {
background-color: #E4E4E4;
color : #009;
padding: 10px;
}
.s22 {
background-color: #F00;
color : #FFF;
padding: 10px;
}
</style>
<script>
$(document).ready(function() {
$('#Switch').click( function() {
$( "h3" ).switchClass( "s11", "s22", 2000, "easeInOutQuad");
});
});
</script>
</head>
<body>
<h3 class = "s11">This is an sample heading element to change the style class.</h3>
<input type="button" id="Switch" value="Switch Class" />
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery switchClass() method</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>
.s11 {
background-color: #E4E4E4;
color : #009;
padding: 10px;
}
.s22 {
background-color: #F00;
color : #FFF;
padding: 10px;
}
</style>
<script>
$(document).ready(function() {
$('#Switch').click( function() {
$( "h3" ).switchClass( "s11", "s22", 2000, "easeInOutQuad");
});
});
</script>
</head>
<body>
<h3 class = "s11">This is an sample heading element to change the style class.</h3>
<input type="button" id="Switch" value="Switch Class" />
</body>
</html>
jQuery switchClass is not a function, not working, toggleclass, animate, remove all classes
JQuery switchClass() - jquery
Online Editor
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
HTML Templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
CSS HTML Layout
Find here examples of creative and unique website layouts.
Free CSS HTML Menu
Find here examples of creative and unique website CSS HTML menu.