jQuery Animateを深く学ぶ(3)

この記事では、誰もがさらに学習できるように、前の記事 [JQuery - Animate の詳細な学習 (2)] に続いて、jQuery での Animate の使用法を詳しく紹介します。 jQuery での animate の使用を理解します。困っている友人は参考にしていただければ幸いです。

progress

タイプ： Function(約束アニメーション, 進行状況数, 残り数)

アニメーションの各ステップが完了した後に呼び出される関数です。アニメーションのプロパティの数と同じくらい、アニメーション化された各要素は個別の機能を実行します。 (追加バージョン: 1.8)

進捗状況の数値: 現在のアニメーションの進捗レベルを示します。0~1

残りの数: 最終的なアニメーションのプロパティ値との差分です

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

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>

Javscript コード:

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

コンソールに出力された後の値を観察すると、何かが得られます。

単純な進行状況バーのアニメーションを作成します。赤から始まり、30% で緑に変わり、60% でピンクに変わります。色変更プラグインはなく、クラスを置き換えることが選択されます。 。この進歩とステップの応用を誰もが理解できるように、この例が他の人にインスピレーションを与えることを願っています。

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

Html コード:

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

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

要約: 上記がこの記事の全内容です。誰もが学ぶことが役に立ちます。

以上がjQuery Animateを深く学ぶ(3)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。