JQuery アニメーションと特殊効果の例分析_jquery

この記事では、JQuery アニメーションと特殊効果の使用法を例とともに分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

表示と非表示

show(spped,[callback]) および Hide(spped,[callback])
速度は遅い、標準、速いを入力でき、対応する速度はそれぞれ600ms、400ms、200msです。ミリ秒を直接入力することもできます。コールバック関数は、アクションの完了後に呼び出されます。

$("img").show(3000,function(){ 
   $(this).css("border","solid 1px #ccc”); 
});

toggle(true orfalse) はブール値形式を持ち、true の場合は要素が表示され、そうでない場合は要素が非表示になります。 toggle(speed,[callback]) の使用法は show() 関数
と似ています。

slideDown(spped,[callback]) および slideUp(spped,[callback])

slideToglge(sped,[callback]) はスライド効果を切り替えます

fadeIn(spped,[callback]) および fadeOut(spped,[callback])

fadeTo(spped,opacity,[callback]); 不透明度は0から1の間の透明度で、1は完全に透明です

animate(params,[duration],[イージング],[callback])

継続時間は、3 つのデフォルトの速度文字 (低速、標準、高速、またはカスタムのミリ秒数) を表します
イージングは​​アニメーション プラグインによってアニメーションのパフォーマンスを制御するために使用され、通常はリニアおよびスイングのキャラクター値を持ちます。
callback はアニメーションの完了後に実行されるコールバック関数です

$(this).animate( 
   {   width:"20%", 
       height:"70px"    
    }, //对象表示法，JQuery中常用这种格式传递参数 
   3000, 
   function(){ 
   $(this).css("border":"solid 3px #666") 
   .html("变大了！！"); 
   } 
);//传递参数时，必须用骆驼法来写属性名称，如font-size必须写成fontSize

$("p").animate( 
   { left:"20px", 
    top:"70px"  
   }, 
   3000 
) //向右移动20像素，向下移动70像素

gotoEnd は、実行中のアニメーションをすぐに完了するかどうかを示すブール値です
遅延(期間,[キュー名])
継続時間は遅延時間の値
queueName はキュー名詞、つまりアニメーション キュー
を表します。

$("a :eq(0)").click(function(){ 
   $("img").slideToggle(3000); 
}); //“拉窗帘”方式切换图片 
$("a:eq(1)").click(function(){ 
   $("img").stop(); 
}); //停止正在执行的动画 
$("a:eq(2)").click(function(){ 
   $("img").delay(2000) 
   .slideToggle(3000); 
}); //延时切换图片