Latest web development tutorials

jQuery UI API - .toggleClass ()

categoria

Effetti speciali (Effetti) | Effetti core (Effetti Core) | Metodo sovraccarico (metodo override)

uso

Descrizione: Quando lo stile di animazione è cambiato, secondo esistenza di classe e il valore del parametro di opzione all'interno del set di elementi corrispondenti di ogni elemento per aggiungere o rimuovere uno o più classe.

Restituisce: il jQuery

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

参数 类型 描述 默认值
ClassName String 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称，多个 class 名称用空格分隔 。
switch Boolean 一个布尔值，指定 class 应被添加还是被移除。
duration Number 或 String 一个字符串或一个数字，指定动画将运行多久。 400
easing String 一个字符串，指示要使用的 easing 函数。 swing
complete Function() 一旦动画完成时要调用的函数。

.toggleClass( className [, switch ] [, options ] )

参数 类型 描述
ClassName String 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称，多个 class 名称用空格分隔 。
switch Boolean 一个布尔值，指定 class 应被添加还是被移除。
options Object 所有的动画设置。所有的属性是可选的。
  • duration （默认值： 400 ）
    类型：Number 或 String
    描述：一个字符串或一个数字，指定动画将运行多久。
  • easing （默认值： swing ）
    类型：String
    描述：一个字符串，指示要使用的 easing 函数。
  • complete
    类型：Function()
    描述：一旦动画完成时要调用的函数。
  • children （默认值： false ）
    类型：Boolean
    描述：指定动画是否被应用到匹配元素的所有后代。此功能应慎重使用，因为判断元素是否是动画的后代的代价是很大的，会根据后代的数量线性增长。
  • queue （默认值： true ）
    类型：Boolean 或 String
    描述：一个布尔值，指示是否将动画放在特效队列中。如果是 false，动画将立即开始。 自 jQuery 1.7 起 ，queue 选项也接受一个字符串，在这种情况下，动画添加到由字符串表示的队列中。

Transizione simile al CSS nativo, classe di animazione di jQuery UI fornisce una transizione graduale da uno stato ad un altro stato di transizione, garantendo nel contempo che tutti i dettagli del cambiamento di stile è fatto tramite CSS senza l'utilizzo di JavaScript. Tutte le animazioni di classe, che comprende .toggleClass() , consente la durata personalizzato dell'animazione e facilitando la funzione, l'animazione è completa fornisce anche un callback.

Non tutti gli stili possono essere animati da aggiungere. Ad esempio, l'immagine di sfondo animato. Non qualsiasi stile di animazione cambierà quando il film finisce.

Le estensioni plug-in jQuery costruiti .toggleClass () metodo. Se jQuery UI non viene caricato, chiamare .toggleClass() metodo non si limita a fallire, perché il metodo esiste in jQuery. Ma non è il comportamento previsto.

Esempi

Per abbinare la commutazione elemento di classe "big-blue". 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> .toggleClass () Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Style>
  div {
    width: 100px;
    altezza: 100px;
    background-color: #ccc;
  }
  .big-blu {
    width: 200px;
    height: 200px;
    background-color: # 00F;
  }
  </ Style>
  <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Div> </ div>
 
<Script>
$ ( "Div") .Click (function () {
  $ (This) .toggleClass ( "big-blu", 1000, "easeOutSine");
});
</ Script>
 
</ Corpo>
</ Html>