Maison >interface Web >js tutoriel >Implémenter des effets d'animation de page via jquery (exemple de code)

Implémenter des effets d'animation de page via jquery (exemple de code)

高洛峰original: 2016-12-28 10:35:051336parcourir

Il existe de nombreuses fonctions qui peuvent être utilisées pour obtenir des effets d'animation, parmi lesquelles la fonction d'animation est l'une des fonctions les plus courantes. Ce qui suit est une brève introduction à la façon d'utiliser cette fonction.

Forme de base de la fonction d'animation

La forme de base de l'effet d'animation obtenu grâce à l'animation est :

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

Parmi eux, {params} est un élément obligatoire. C'est un objet qui spécifie le style CSS que nous voulons que l'élément spécifié ait après son exécution dans l'effet d'animation. La vitesse et le rappel sont tous deux facultatifs. , et speed spécifie la vitesse à laquelle l'animation s'exécute, sa valeur peut être de type numérique (par exemple, 1000 signifie que l'animation passera au style spécifié par params dans 1 seconde), lente ou rapide. callback spécifie la fonction à exécuter après la fin de l'animation.

Exemple de code :

<!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({
   left:&#39;250px&#39;,
   opacity:&#39;0.5&#39;,
   height:&#39;150px&#39;,
   width:&#39;150px&#39;
  });
 });
});
</script> 
</head>
  
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
 
</body>
</html>

Formulaires d'affectation multiples pour les variables dans l'objet {params}

À propos des variables dans l'objet {params}, vous pouvez attribuer des valeurs sous la forme suivante.

Forme de valeur absolue

L'exemple de code donné ci-dessus consiste à attribuer l'objet params sous la forme de valeur absolue

Forme de valeur relative

Par exemple Dire à ajoutez " ", "-", etc. devant la valeur de la variable.

Exemple de code :

<script> 
$(document).ready(function(){
 $("button").click(function(){
  $("div").animate({
   left:&#39;250px&#39;,
   height:&#39;+=150px&#39;,
   width:&#39;+=150px&#39;
  });
 });
});
</script>

afficher, masquer et activer

valeurs variables de l'objet params, nous pouvons également attribuer les trois valeurs ci-dessus, telles que code suivant, Sa fonction est de faire disparaître le contenu de la balise div.

$("button").click(function(){
 $("div").animate({
  height:&#39;toggle&#39;
 });
});

L'article ci-dessus sur la réalisation de l'effet d'animation de la page via jquery (exemple de code) est tout le contenu partagé par l'éditeur, j'espère qu'il pourra vous donner une référence, et j'espère aussi que tout le monde. prendra en charge le site Web chinois PHP.

Pour plus d'articles sur les effets d'animation de page (exemple de code) obtenus via jquery, veuillez faire attention au site Web PHP chinois !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple d'analyse de l'événement déclencheur de sélection de la liste déroulante de sélection basé sur jQueryArticle suivant：Exemple d'analyse de l'événement déclencheur de sélection de la liste déroulante de sélection basé sur jQuery

Articles Liés

Voir plus