jQuery UI exemplo - mudança de classe (Classe Alterar)
Quando o estilo de animação mudado, conforme a existência de classes e o valor do parâmetro de opção dentro do conjunto de elementos emparelhados de cada elemento para adicionar ou remover uma ou mais classes.
Para mais informações sobre .toggleClass() Os detalhes dos métodos, consulte a documentação da API .toggleClass () .
.toggleClass () Demonstração
Clique no botão para visualizar efeitos.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Efeitos - .toggleClass () Demonstração </ 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; height: 200px; position: relative;}
#button {padding: .5em 1em; text-decoration: none;}
#effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid # 000; background: #eee; color: # 333;}
.newClass {text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em;}
</ Style>
<Script>
$ (Function () {
$ ( "#button") .click (Function () {
$ ( "#effect") .toggleClass ( "NewClass", 1000);
return false;
});
});
</ Script>
</ Head>
<Body>
<Div class = "toggler">
<Div id = "efeito" class = "NewClass ui-canto-all">
Etiam libero neque, luctus um, eleifend nec, sempre em, lorem. Sed Pede.
</ Div>
</ Div>
<a href="#" id="button" class="ui-state-default ui-corner-all"> efeitos executados </a>
</ Body>
</ Html>