Come risolvere il menu Bouncing in jQuery

October 30

Come risolvere il menu Bouncing in jQuery


plugin di interfaccia utente del framework jQuery JavaScript permette allo sviluppatore Web per applicare effetti speciali a elementi del sito web un tale voci di menu. Questo include un effetto di rimbalzo. L'effetto accetta argomenti che determinano quante volte apparirà l'effetto di rimbalzo, in quale direzione sarà rimbalzo, la distanza che rimbalza e per quanto tempo l'azione rimbalzo durerà. Lo sviluppatore Web può risolvere questo effetto attraverso la sperimentazione di questi argomenti.

istruzione

1 Modificare l'impostazione direzionale. L'argomento impostazione direzionale controlla l'aspetto direzionale del effetto di rimbalzo. L'argomento accetta un ambiente serie di sinistra, destra, su o giù. Guardate questi due esempi. Nel primo esempio, il menu rimbalza sulla destra. Nel secondo, il menu rimbalza verso sinistra. Cambiare la direzione dell'azione rimbalzo può fornire una soluzione rapida ai problemi di allineamento aspetto-oriented del menu.

$ ( '# Menù) .Click (function () {

$(this).effect("bounce", { direction:'right'}, 300);

});

$ ( '# Menù) .Click (function () {

$(this).effect("bounce", { direction:'left'}, 300);

});

2 Modificare il numero di azioni che rimbalzano. L'argomento volte controlla il numero di volte che l'oggetto rimbalza. Questo argomento consente di risolvere i problemi di aspetto quando l'elemento rimbalza troppe volte. Consideriamo i seguenti due esempi. Nel primo esempio, la voce di menu rimbalza 10 volte. Nel secondo esempio, la voce di menu è stato limitato a solo tre azioni che rimbalzano.

$ ( '# Menù'). Clic (function () {

$(this).effect("bounce", { times:10 }, 300);

});

$ ( '# Menù'). Clic (function () {

$(this).effect("bounce", { times:3 }, 300);

});

3 Modificare l'argomento di distanza. L'argomento distanza determina fino a che punto l'elemento rimbalza. Una voce di menu che rimbalza troppo può far apparire il menu non allineati. Questo esempio mostra una voce di menu che rimbalzano 90 pixel a destra.

$ ( '# Menù) .Click (function () {

$(this).effect("bounce", { distance:90 }, 300);

});

4 Controllare l'impostazione della modalità. L'argomento modalità controlla ciò che l'elemento di menu fa dopo l'effetto. Questo argomento accetta tre differenti impostazioni di stringa. La modalità può essere impostato per mostrare, nascondere o effetto. Guarda questo esempio. L'impostazione della modalità è stata impostata da nascondere. Ciò significa che l'elemento scomparirà quando finisce rimbalza. Come si può immaginare, questo potrebbe creare un problema significativo con l'aspetto del menu.

$ ( '# Menù) .Click (function () {

$(this).effect("bounce", { mode:'hide'}, 300);

});

5 Cambiare l'impostazione del tempo. Questo valore regola la quantità di tempo durante il quale l'elemento rimbalza. In tutti gli esempi precedenti, l'impostazione del tempo ha conquistato tre secondi. In questo esempio, si noterà che l'impostazione è stata modificata per sei secondi. Calibrazione l'attuazione tempo può influenzare l'aspetto dell'elemento menu come si correla con altri elementi.

$ ( '# Menù) .Click (function () {

$(this).effect("bounce", { direction:'right'}, 600);

});