Latest web development tutorials

ejemplos de interfaz de usuario jQuery - Agregar clase (clase) Añadir

Cuando el estilo de animación cambia para cada elemento del conjunto de elementos emparejados dentro añade la clase especificada.

Para obtener más información acerca de .addClass() detalles de los métodos, consulte la documentación de la API .addClass () .

.addClass () Demo

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 - .addClass () 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 {width: 240px; padding: 1 em; font-size: 1.2em; border: 1px solid # 000; fondo: #eee; color: # 333;}
    .newClass {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 () {
      $ ( "#effect") .addClass ( "NewClass", 1000, de devolución de llamada);
      return false;
    });
 
    función de llamada () {
      setTimeout (function () {
        $ ( "#effect") .removeClass ( "NewClass");
      }, 1500);
    }
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "basculador">
  <Div id = "efecto" class = "ui-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>