jQuery学習の旅9アニメーション効果
84561 ワード
1、要素の表示と非表示 display:none; 非表示 display:block; 表示 単純な表示と非表示方法 a)show()表示 b)hide()非表示 c)toggle()スイッチ、表示は非表示、非表示は
CSSでは、visibilityまたはdisplayスタイルを使用して、要素の表示と非表示を制御するときに効果は同じですが、結果は異なります.具体的な説明は以下の通りです. visibilityプロパティは、エレメントを非表示にすると、ドキュメントフローにおけるエレメントの影響力を保存し、非表示になったエレメントの未知は変わらない.このプロパティにはvisible(デフォルト)とhiddenの2つの値が含まれます. displayが非表示になった後、非表示の要素はドキュメントの場所を占有しなくなりました.
2、スライド効果の表示と非表示 slideUp(speed[,callback])要素を上にスライドさせ、最終的に を隠す. slideDown(speed[,callback])要素を下にスライドさせ、最終的に を表示する. slideToggle(speed[,callback]) speed:効果を設定する速度(slow(600)normal(400)fast(200)時間(ミリ秒)) callback:効果実行後に自動的に呼び出されるコールバック関数
3、フェードアウト効果
要素を一定の透明度で変化させ、表示と非表示の効果を達成します. fadeIn(speed, [callback]) fadeOut(speed, [callback]) fadeToggle(speed,[callback])スイッチング効果 fadeTo(speed,opacity,[callback])divを一定の透明度(0-1)0.3に設定すると30%透明度 になります.
透明度を設定します.divの透明度は30%です.
4、アニメーション効果の下地方法animate()
show()hide()などのアニメーション効果の内部でanimate()を実行する方法
css()などの一般的なjqueryメソッドが実行されると、現在のjqueryオブジェクトが返されるため、jqueryの多くのメソッドはチェーン呼び出し可能です.
5、累加累減アニメーション
アニメーションがleft:500を一度に設定すると、最初にdivをクリックすると500ピクセル左に移動し、2回目のクリックでは動かなくなります.累積累積累積は連続的に動いており、left:"500 px"をleft:"+=500 px"またはleft:"-=500 px"に変更するだけでよい.
6、マルチアニメーション
1、複数のアニメーションを同時に実行する上の例ではleft属性の変化のみを制御していますが、今回はleft属性を制御するときに要素の高さを200 pxに同時に制御します
2、順次アニメーションを実行する
上の例では、要素の右シフトと高さの拡大の2つのアニメーションが同時に行われます.右に移動して高さを拡大するのは簡単です.上のanimate()メソッドを2つに分解するだけでいいです.
3、総合アニメーション
次に、より複雑なアニメーションを作成します.div要素をクリックして右に移動しながら高さを大きくし、不透明度を50%から100%に切り替えます.次に上から下に移動させ、幅を大きくして、これらの効果が完了したら薄く隠すようにします.
7、アニメーションコールバック関数
前の例では、エレメントを非表示にするのではなく、最後のステップでcssスタイルを切り替えたい場合.これでanimateの3番目のパラメータコールバック関数を使用できます
これでcssメソッドをアニメーションキューに追加します.
8、アニメーションを停止し、アニメーション状態かどうかを判断する
1、要素のアニメーションを停止する clearQueue:実行されていないアニメーションキュー を空にするかどうかを表します. gotoEnd:実行中のアニメーションを最後のステータス にジャンプするかどうかを表します.
stop()メソッドの2つのパラメータは、総合的な例で理解できます.
2、要素がアニメーション状態かどうかを判断する
animate()メソッドを使用する場合は、アニメーションの蓄積によるアニメーションとユーザの動作が一致しない現象を回避します.ユーザーがエレメント上でanimate()アニメーションをすばやく実行すると、アニメーションの蓄積が表示されます.
解決策は、要素がアニメーション状態にあるかどうかを判断し、アニメーション状態にない場合に、要素に新しいアニメーションを追加することです.使用方法:
<script type="text/javascript"> function f1(){ // $("div").hide();//display:none //document.getElementById('id').style.display="none"; } function f2(){ // $("div").show();//display:block } function f3(){ $("div").toggle(); } </script>
<style type="text/css"> div {width:300px; height:200px; background-color:blue;} </style>
<body>
<div>duck and dog</div>
<input type="button" value=" " onclick="f1()" />
<input type="button" value=" " onclick="f2()" />
<input type="button" value=" " onclick="f3()" />
</body>CSSでは、visibilityまたはdisplayスタイルを使用して、要素の表示と非表示を制御するときに効果は同じですが、結果は異なります.具体的な説明は以下の通りです.
2、スライド効果の表示と非表示
<script type="text/javascript"> function f1(){ // $("div").slideUp(3000,function(){ alert(' ， '); }); } function f2(){ // $("div").slideDown(3000,function(){ alert(' '); });//display:block } function f3(){ $("div").slideToggle(1000); } $(function(){ // //setInterval("f3()",1000); }); </script>
<style type="text/css"> div {width:300px; height:200px; background-color:blue;} </style>
<body>
<div>duck and dog</div>
<input type="button" value=" " onclick="f1()" />
<input type="button" value=" " onclick="f2()" />
<input type="button" value=" " onclick="f3()" />
</body>3、フェードアウト効果
要素を一定の透明度で変化させ、表示と非表示の効果を達成します.
<script type="text/javascript"> function f1(){ // $("div").fadeOut(4000); } function f2(){ // $("div").fadeIn(4000); $("#two").fadeTo(2000,0.3); } function f3(){ $("div").fadeToggle(2000); } </script>
<style type="text/css"> div {width:300px; height:200px; background-color:blue;} </style>
<body>
<div id = "two">duck and dog</div>
<input type="button" value=" " onclick="f1()" />
<input type="button" value=" " onclick="f2()" />
<input type="button" value=" " onclick="f3()" />
</body>透明度を設定します.divの透明度は30%です.
4、アニメーション効果の下地方法animate()
show()hide()などのアニメーション効果の内部でanimate()を実行する方法
$().animate(css [， ][， ]);css()などの一般的なjqueryメソッドが実行されると、現在のjqueryオブジェクトが返されるため、jqueryの多くのメソッドはチェーン呼び出し可能です.
<script type="text/javascript"> function f1(){ // 、 、div //font-size background-color color console.log($("div")); //jquery css jquery // css return this console.log($("div").css('font-weight','bold').css("background-color",'pink')); var jn = {'font-size':'30px',width:'400px',height:'300px'}; $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000); //$("div").animate(jn,2000); } </script>
<style type="text/css"> div {width:300px; height:200px; background-color:blue; } </style>
<body>
<div>duck and dog</div>
<input type="button" value=" " onclick="f1()" />
</body>5、累加累減アニメーション
アニメーションがleft:500を一度に設定すると、最初にdivをクリックすると500ピクセル左に移動し、2回目のクリックでは動かなくなります.累積累積累積は連続的に動いており、left:"500 px"をleft:"+=500 px"またはleft:"-=500 px"に変更するだけでよい.
(function(){
$("#panel").click(function(){
$(this).animate({left: "+=500px"}, 3000);
})
})</span> 6、マルチアニメーション
1、複数のアニメーションを同時に実行する上の例ではleft属性の変化のみを制御していますが、今回はleft属性を制御するときに要素の高さを200 pxに同時に制御します
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px",height:"200px"}, 3000);
})
})2、順次アニメーションを実行する
上の例では、要素の右シフトと高さの拡大の2つのアニメーションが同時に行われます.右に移動して高さを拡大するのは簡単です.上のanimate()メソッドを2つに分解するだけでいいです.
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px"},3000)
.animate({height:"200px"},1000);
})
}) 3、総合アニメーション
次に、より複雑なアニメーションを作成します.div要素をクリックして右に移動しながら高さを大きくし、不透明度を50%から100%に切り替えます.次に上から下に移動させ、幅を大きくして、これらの効果が完了したら薄く隠すようにします.
$(function(){
$("#panel").css("opacity",0.5);//
$("#panel").click(function(){
$(this).animate({left: "400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut(1000);
})
}) 7、アニメーションコールバック関数
前の例では、エレメントを非表示にするのではなく、最後のステップでcssスタイルを切り替えたい場合.これでanimateの3番目のパラメータコールバック関数を使用できます
$(function(){
$("#panel").css("opacity",0.5);//
$("#panel").click(function(){
$(this).animate({left: "400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});
})
}) これでcssメソッドをアニメーションキューに追加します.
8、アニメーションを停止し、アニメーション状態かどうかを判断する
1、要素のアニメーションを停止する
stop([clearQueue][,gotoEnd])は両方ともオプションのパラメータで、booleanタイプのパラメータの説明です.stop()メソッドの2つのパラメータは、総合的な例で理解できます.
<style type="text/css"> *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;} .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;} .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;} </style>
<script src="../../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript"> $(function(){ $("button:eq(0)").click(function () { $("#panel") .animate({height : "150" } , 2000 ) .animate({width : "300" } , 2000 ) .hide(3000) .animate({height : "show" , width : "show" , opacity : "show" } , 2000 ) .animate({height : "500"} , 2000 ); }); $("button:eq(1)").click(function () { $("#panel").stop();// ， }); $("button:eq(2)").click(function () { $("#panel").stop(true);// }); $("button:eq(3)").click(function () { $("#panel").stop(false,true);// ， }); $("button:eq(4)").click(function () { $("#panel").stop(true,true);// ， }); }) </script>
<body>
<button> </button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<div id="panel">
<h5 class="head"> </h5>
<div class="content">
， ，
</div>
</div>
</body>
</html>2、要素がアニメーション状態かどうかを判断する
animate()メソッドを使用する場合は、アニメーションの蓄積によるアニメーションとユーザの動作が一致しない現象を回避します.ユーザーがエレメント上でanimate()アニメーションをすばやく実行すると、アニメーションの蓄積が表示されます.
解決策は、要素がアニメーション状態にあるかどうかを判断し、アニメーション状態にない場合に、要素に新しいアニメーションを追加することです.使用方法:
if(!$(element).is(":animated")){
//
}