Vertiefendes Erlernen von jQuery Animate (3)

Dieser Artikel gibt Ihnen eine ausführliche Einführung in die Verwendung von Animate in jQuery. Er folgt dem vorherigen Artikel [Ausführliches Erlernen von Animate in jQuery (2) ], damit Sie weitermachen können Verstehen Sie die Verwendung von Animate in jQuery. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Fortschritt

Typ: Funktion (Promise-Animation, Anzahl Fortschritt, Anzahl verbleibender Ms)

Eine Funktion, die unabhängig davon aufgerufen wird, nachdem jeder Schritt der Animation abgeschlossen ist der Animation So viele Eigenschaften es gibt, jedes animierte Element führt eine separate Funktion aus. (hinzugefügte Version: 1.8)

Anzahl Fortschritt: Zeigt die aktuelle Animationsfortschrittsstufe 0~1 an

Anzahl verbleibender Ms: Dies ist die Differenz zwischen dem endgültigen Animationseigenschaftswert und der Differenz

CSS-Code:

.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;}

Html-Code:

<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>

Javscript-Code:

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的变化
            }
      });
    });

Beobachten Sie den Wert nach der Ausgabe in der Konsole, Sie werden etwas bekommen!

Erstellen Sie eine einfache Fortschrittsbalkenanimation. Sie beginnt bei Rot, wechselt bei 30 % zu Grün und wechselt bei 60 % zu Rosa. Es gibt kein Farbänderungs-Plug-in und Sie können die Klasse ersetzen . Lassen Sie alle diesen Fortschritt und die schrittweise Anwendung verstehen. Ich hoffe, dass dieses Beispiel andere inspirieren wird!

CSS-Code:

 .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;
 }

Html-Code:

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

Javascript-Code:

$(".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");
	}
});

Zusammenfassung: Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es kann helfen. Das Lernen jedes Einzelnen hilft.

Das obige ist der detaillierte Inhalt vonVertiefendes Erlernen von jQuery Animate (3). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!