Effeetti di jQuery
jQuery può creare effetti come nascondere, mostrare, commutare, scorrere e animazioni personalizzate.
Prova tu stesso
请试一下这个 jQuery 效果：
CodeW3C.com - 领先的 Web 技术教程站点
在 CodeW3C.com，你可以找到你所需要的所有网站建设教程。
请点击这里
Esempio
- jQuery hide()
- 演示简单的 jQuery hide() 函数。
- jQuery hide()
- 另一个 hide() 演示。如何隐藏部分文本。
- jQuery slideToggle()
- 演示简单的 slide panel 效果。
- jQuery fadeTo()
- 演示简单的 jQuery fadeTo() 函数。
- jQuery animate()
- 演示简单的 jQuery animate() 函数。
Esempio
}); $\(\"#show\\ $\(\"p\\ });
Le funzioni hide() e show() possono entrambe impostare due parametri opzionali: speed e callback.
Sintassi:
$\(selector\).hide(speed,callback) $\(selector\).show(speed,callback)
speed I parametri specificano la velocità di visualizzazione o nascosto. Puoi impostare questi valori: "slow", "fast", "normal" o in millisecondi.
callback I parametri sono i nomi delle funzioni eseguite dopo che le funzioni hide o show sono completate. Sarai in grado di imparare di più su di essi nei prossimi capitoli di questa guida callback Conoscenza dei parametri.
Esempio
$("button").click(function(){
$\(\"p\\
});
Switch jQuery
La funzione toggle() di jQuery utilizza le funzioni show() o hide() per commutare lo stato visibile degli elementi HTML.
Nasconde gli elementi visibili e mostra gli elementi nascosti.
Sintassi:
$\(selector\).toggle(speed,callback)
speed I parametri possono essere impostati con questi valori: "slow", "fast", "normal" o in millisecondi.
Esempio
$("button").click(function(){
$\(\"p\\
});
callback Il parametro è il nome della funzione che viene eseguita dopo la conclusione della funzione. Puoi imparare di più su questo argomento nei prossimi capitoli di questa guida. callback Conoscenza dei parametri.
Funzioni di scorrimento jQuery - slideDown, slideUp, slideToggle
jQuery possiede le seguenti funzioni di scorrimento:
$\(selector\).slideDown(speed,callback) $\(selector\).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed I parametri possono essere impostati con questi valori: "slow", "fast", "normal" o in millisecondi.
callback Il parametro è il nome della funzione che viene eseguita dopo la conclusione della funzione. Puoi imparare di più su questo argomento nei prossimi capitoli di questa guida. callback Conoscenza dei parametri.
Esempio di slideDown()
$(".flip").click(function(){
$(".panel").slideDown();
});
Esempio di slideUp()
$(".flip").click(function(){
$(".panel").slideUp();
})
Esempio di slideToggle()
$(".flip").click(function(){
$(".panel").slideToggle();
});
jQuery Funzioni Fade - fadeIn(), fadeOut(), fadeTo()
jQuery offre le seguenti funzioni fade:
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
speed I parametri possono essere impostati con questi valori: "slow", "fast", "normal" o in millisecondi.
Nei parametri della funzione fadeTo() opacity Il parametro specifica la decrescita alla trasparenza specificata.
callback Il parametro è il nome della funzione che viene eseguita dopo la conclusione della funzione. Puoi imparare di più su questo argomento nei prossimi capitoli di questa guida. callback Conoscenza dei parametri.
Esempio di fadeTo()
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
Esempio di fadeOut()
$("button").click(function(){
$("div").fadeOut(4000);
});
jQuery Animazione Personalizzata
La sintassi della funzione jQuery per creare animazioni personalizzate è:
$(selector).animate({params},[duration],[easing],[callback])
Il parametro chiave è paramsDefinisce le proprietà CSS utilizzate per l'animazione. È possibile impostare contemporaneamente più di tali proprietà:
$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
Il secondo parametro è durationDefinisce il tempo applicato all'animazione. Il valore impostato è: "slow", "fast", "normal" o in millisecondi.
Esempio 1
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
Esempio 2
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
Gli elementi HTML sono posizionati staticamente per default e non possono essere spostati.
Per rendere gli elementi mobili, impostare CSS position su relative o absolute.
jQuery Effetti - Da questa pagina
| Funzione | Descrizione |
|---|---|
| $(selector).hide() | Nascondere l'elemento selezionato |
| $(selector).show() | Mostrare l'elemento selezionato |
| $(selector).toggle() | Cambiare (nascondere e mostrare) l'elemento selezionato |
| $(selector).slideDown() | Scorrere verso il basso (mostrare) l'elemento selezionato |
| $(selector).slideUp() | Scorrere verso l'alto (nascondere) l'elemento selezionato |
| $(selector).slideToggle() | Cambiare lo scorrimento verso l'alto e verso il basso dell'elemento selezionato |
| $(selector).fadeIn() | Fare apparire l'elemento selezionato |
| $(selector).fadeOut() | Sfumare l'elemento selezionato |
| $(selector).fadeTo() | Fare sfumare l'elemento selezionato a una opacità data |
| $(selector).animate() | Eseguire animazioni personalizzate sugli elementi selezionati |
Per ottenere un manuale di riferimento completo, visitare il nostro Manuale di riferimento degli effetti jQuery.
