通过jquery实现页面的动画效果(实例代码)

Ci sono molte funzioni che possono essere utilizzate per implementare effetti animazione, tra cui animate è una delle più comuni. Di seguito è riportata una breve introduzione al modo di utilizzo di questa funzione.

Forma base della funzione animate

La forma base per implementare un effetto animazione tramite animate è:

$(selector).animate({params},speed,callback);

Dove {params} è un elemento obbligatorio, è un oggetto che specifica lo stile CSS che l'elemento dovrebbe avere dopo aver eseguito l'animazione, speed e callback sono opzionali, dove speed specifica la velocità dell'animazione, che può essere un tipo numerico (ad esempio, 1000 indica che l'animazione dura 1 secondo per diventare lo stile specificato da params), slow e fast. callback specifica la funzione da eseguire alla fine dell'animazione.

Esempio di codice:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$("document").ready(function(){
 $("button").click(function(){
  $("div").animate({
   sinistra: '250px',
   opacità:'0.5',
   altezza:'150px',
   larghezza:'150px'
  });
 });
});
</script> 
</head>
<body>
<button>Inizia Animazione</button>
<p>Per default, tutti gli elementi HTML hanno una posizione statica e non possono essere spostati. Per manipolare la posizione, ricordati di impostare prima la proprietà CSS di posizione dell'elemento su relativa, fissa o assoluta!</p>
<div style="background:#98bf21;altezza:100px;larghezza:100px;posizione:assoluto;">
</div>
</body>
</html>

Vari modi di assegnazione delle variabili dell'oggetto {params}

Per le variabili dell'oggetto {params}, è possibile assegnare i valori nel seguente modo.

Forma a valore assoluto

L'esempio di codice fornito nell'articolo precedente assegna all'oggetto params i valori utilizzando il formato a valore assoluto.

Forma a valore relativo

Per esempio, puoi aggiungere '+' o '-' davanti al valore della variabile.

Esempio di codice:

<script> 
$("document").ready(function(){
 $("button").click(function(){
  $("div").animate({
   sinistra: '250px',
   altezza: '+=150px',
   larghezza: '+=150px'
  });
 });
});
</script>

show, hide e toggle

Valori delle variabili dell'oggetto params, possiamo assegnare anche i tre valori elencati di seguito, come nel codice seguente, il cui effetto è di far scomparire il contenuto del tag div.

$("button").click(function(){
 $("div").animate({
  altezza: 'toggle'
 });
});

Ecco tutto il contenuto condiviso da noi attraverso jQuery per creare effetti animazione di pagina (esempio di codice). Spero che possa essere di riferimento per voi, e vi prego di continuare a supportare il tutorial URL.

教程基础