ホームページ >ウェブフロントエンド >jsチュートリアル >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 サイトの他の関連記事を参照してください。