Apprentissage approfondi de jQuery Animate (3)-js tutoriel-php.cn

Apprentissage approfondi de jQuery Animate (3)

青灯夜游

Libérer： 2018-11-13 14:43:44

avant

1685 Les gens l'ont consulté

Cet article vous donnera une introduction approfondie à l'utilisation d'Animate dans jQuery. Il fait suite à l'article précédent [Apprentissage approfondi d'Animate dans jQuery (2) ] afin que vous puissiez aller plus loin. comprendre l'utilisation d'animate dans jQuery. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

progression

Type : Fonction (Animation de promesse, Progression du nombre, Nombre de Ms restants)

Une fonction appelée après chaque étape de l'animation est terminée, quelle que soit de l'animation Autant de propriétés qu'il existe, chaque élément animé remplit une fonction distincte. (version ajoutée : 1.8)

Progression du nombre : Indique le niveau de progression actuel de l'animation 0~1

Nombre restantMs : C'est la différence entre la valeur finale de la propriété d'animation et la différence

Code CSS :

.block {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
  }
  .wrap{position:relative;float:left;width:400px;}
  #go{border:1px solid red;color:blue;cursor:pointer;}

Copier après la connexion

Code HTML :

<p>
    <button id="go">Run>></button>
</p>
<p class="wrap">
    <p class="block"></p>
    <p class="block"></p>
    <p class="block"></p>
    <p class="block"></p>
    <p class="block"></p>
    <p class="block"></p>
</p>

Copier après la connexion

Code Javascript :

var j=0,k=0;
    $( "#go" ).one("click",function() {
      $( ".block:first" ).animate(
          {
            left: 100,top:200
          },
          {
            duration: 1000,
            step: function( now, fx ){
                k++;
                if(k==1) console.log(fx);
              $( ".block:gt(0)" ).css( fx.prop, now );//注意到prop的变化性
            },
            progress:function(a,p,r){
                j++;
                if(j==1){console.log(a);console.log(a.props)}
                a.progress(function(){
                    console.log("Hi"+j);//注意progress的运行时机
                });                
                console.log(p+"---"+r);//注意p,r的变化
            }
      });
    });

Copier après la connexion

Observez la valeur après sortie dans la console, vous obtiendrez quelque chose!

Créez une animation de barre de progression simple. Elle commence du rouge, passe au vert à 30 % et passe au rose à 60 %. Il n'y a pas de plug-in de changement de couleur et le choix est de remplacer la classe. . Que tout le monde comprenne cette progression et cette étape d’application. J’espère que cet exemple inspirera les autres !

Code CSS :

 .progressBar {
 	float: left;
 	position: relative;
 	width: 500px;
 	height: 30px;
 	border: 1px solid orange;
 	background-color: #999;
 }
 
 .progressBar p {
 	padding: 0;
 	margin: 0;
 	position: absolute;
 	left: 0;
 	top: 0;
 	height: 30px;
 }
 
 .red {
 	background-color: red;
 }
 
 .green {
 	background-color: green;
 }
 
 .pink {
 	background-color: pink;
 }

Copier après la connexion

Code HTML :

 <p class="progressBar"> 
    <p class="progress"></p>
 </p>

Copier après la connexion

Code Javascript :

$(".progressBar p").addClass("red").animate({
	"width": 500
}, {
	duration: 5000,
	progress: function(a, p, r) {
		if(p > 0.3 && !$(this).hasClass("green")) $(this).removeClass().addClass("green");
		if(p > 0.6 && !$(this).hasClass("pink")) $(this).removeClass().addClass("pink");
	}
});

Copier après la connexion

Résumé : Ce qui précède est le résumé de cet article Tout le contenu, j'espère qu'il sera utile à l'étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!