El mejor tutorial de ejemplos de interfaz de usuario jQuery - Conversión de clase (cambio de clase) en 2024. En este tutorial podrás aprender .switchClass () Demo,
Cuando los cambios en el estilo de animación dentro del conjunto de elementos coincidentes para añadir y eliminar todos los elementos de la clase especificada.
Para obtener más información acerca de .switchClass()
detalles de los métodos, consulte la documentación de la API .switchClass () .
Haga clic en el botón de vista previa de efectos.
<! DOCTYPE html> <Html lang = "es"> <Head> <Charset Meta = "UTF-8"> <Título> Efectos de jQuery UI - .switchClass () Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Style> .toggler {width: 500px; altura: 200px; position: relative;} botón # {padding: 1 em .5em; text-decoration: none;} #effect {position: relative;} .newClass {width: 240px; padding: 1 em; espaciado entre letras: 0; font-size: 1.2em; margin: 0;} .anotherNewClass {text-indent: 40px; espaciado entre letras: .4em; ancho: 410px; altura: 100px; padding: 30px; margen: 10px; font-size: 1.6em;} </ Style> <Script> $ (Function () { $ ( "Botón #") .click (function () { $ ( ".newClass") .switchClass ( "NewClass", "anotherNewClass", 1000); $ ( ".anotherNewClass") .switchClass ( "AnotherNewClass", "NewClass", 1000); return false; }); }); </ Script> </ Head> <Cuerpo> <Div class = "basculador"> <Div id = "efecto" class = "ui NewClass-esquina-all"> Etiam libero ñeque, luctus un eleifend nec, sempre en, lorem. Sed pede. </ Div> </ Div> <a href="#" id="button" class="ui-state-default ui-corner-all"> efectos ejecutar </a> </ Body> </ Html>