Vertiefendes Erlernen von jQuery Animate (3)-js-Tutorial-php.cn

Vertiefendes Erlernen von jQuery Animate (3)

青灯夜游

Freigeben： 2018-11-13 14:43:44

nach vorne

1685 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Html-Code:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!