AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery switchClass()


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

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:

 

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>

 

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>

 

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>

 



jQuery switchClass is not a function, not working, toggleclass, animate, remove all classes
JQuery switchClass() - jquery

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...
jQuery slideUp()...
jQuery fadeToggle...
jQuery fadeOut()...
jQuery fadeIn()...
jQuery Effects - hide () and show ()...
jQuery Events...
jQuery Attributes...
jQuery Selectors...