jQuery UI framework proporciona el método switchClass() que ayuda a los programadores a cambiar de una clase CSS a otra junto con la gestión de la transición de un estado a otro de manera fluida. Este método básicamente agrega y elimina clases definidas junto con la animación de las definiciones de estilo del código CSS.
Sintaxis:
$(selector).switchClass( removeClassName, addClassName,
duration, easing, complete )
.switchClass( removeClassName, addClassName, options )
.switchClass( removeClassName, addClassName, options )
Parameters:
removeClassName: More than one classes are separated by space. The name of CSS class used for remove. The type is string.
addClassName: More than one classes are separated by space. The name of the CSS class used for adding animation to all the selected elements.
duration: The time or duration in milliseconds used for the animation effect to run. The default value is 400 ms. The types are number or string.
easing: The options or settings used for animated easing effects. Default value is "swing".
complete: This is the callback function which is executed when the visual effect is completed.
children: The type is Boolean. This mentions if the animations should be applied to all the children or descendants of selected elements.
queue: The types are string or Boolean. It mentions if the animations should be placed in the effects queue.
Links for jQuery UI:
<link
href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/>
<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>
Example 1: In the following example, we are demonstrating the switchClass() method using jQuery code and the visual effects are handled in HTML part of the page. The output image of the result is also shown below.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery UI switchClass method</title>
<!--Pre-compiled libraries -->
<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>
.finalClass {
padding:10px 10px;
font-family: Calibri;
font-size: 24px;
font-weight: bold;
color: red;
}
.initialClass {
padding:10px 10px;
font-family: Calibri;
font-size: 18px;
font-weight: bold;
color: green;
}
#divID{
text-align:center;
border:1px solid black;
width:300px;
height:100px;
}
.height{
height: 10px;
}
</style>
<script>
$(function() {
$('#switchBtnId').click(function() {
$(".initialClass").switchClass(
"initialClass", "finalClass", '500');
$(".finalClass").switchClass(
"finalClass", "initialClass", '500');
return false;
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI switchClass method</b>
<div class="height"></div><br>
<div id="divID">
<div class = "initialClass">
Learning jQuery UI !
</div>
<div class = "initialClass">
Welcome to GFG website!
</div>
</div>
<br />
<input type = "button" id = "switchBtnId"
value = "Click this" />
</body>
</html>
Output:
Example 2:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery UI switchClass method</title>
<!--Pre-compiled libraries -->
<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>
div {
width: 100px;
height: 100px;
background-color: #e9e9e9;
text-align: center;
padding: 10px 10px;
}
.newClass {
width: 200px;
height: 200px;
}
.bgClass {
background-color: green;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI switchClass method</b>
<p></p>
<div class="bgClass">Click this</div>
<script>
$("div").click(function() {
$(this).switchClass("newClass",
"bgClass", 2000, "swing");
$(this).switchClass("bgClass",
"newClass", 2000, "swing");
});
</script>
</body>
</html>
Output:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA