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.


Upload Image, display, edit and delete i...
Login Form with Image background...
How to Create an Image with Transparent ...
Portfolio Gallery Website with filtering...
Simple pagination script PHP MySQLi...
Center Image in div...
Image Hover Overlay Fade...
Sticky image / element / div on scroll...
Responsive images...
Create rounded image in HTML CSS...
Add border around image...
Position Text Over an Image HTML CSS res...
Create a Slideshow Images Gallery...
Create a Sticky Sidebar...
Search bar using CSS HTML...
Shrink Navigation Menu on Scroll...
How to Create Accordion HTML Templates...
Dropdown menu in the navigation bar...
Responsive Top Navigation Bar with mobil...
Split horizontal navigation bar...