jQuery アニメーションの使い方の紹介 animate method

jQuery アニメーションの使い方の紹介 animate method_jquery

WBOY

リリース： 2016-05-16 17:34:31

オリジナル

1441 人が閲覧しました

$(function() {
$("#left" ).click(function(){
$(".block").show();
$(".block").animate({
幅: " 200px",
高さ: " 200px",
fontSize: "1em",
borderWidth: 10
}, "slow","swing")
}); .click(function(){
$(".block").show();
$(".block").animate({
width: "-200px",
height : "-200px",
fontSize: "10em",
}, "slow","swing")
});
/*
$("p"); animate({
高さ: '200px', 不透明度: '切り替え'
}, "遅い");
$("p").animate({
左: 50, 不透明度: ' show'
}, 500); */
//先渐隐
$("p").animate({
opacity: 'toggle'
}, "slow", "swing");
//後显表示
$("p").animate({
opacity: 'show'
}, 500,function() {alert('追加完了' ); });

张梓宇测试

戻り値:jQueryanimate(params, [duration], [easing], [callback])

概要
は定義アニメーション画の関数です。
この関数はこのオブジェクト内の各プロパティは、変更可能なプロパティ (「高さ」、「トップ」、または「不透明度」など) を示します。注意: 指定されたプロパティはすべて、セキュリティ形式で使用する必要があります。，比のようにmarginLeftをmargin-leftに置き換えます。
しかし、各プロパティの値は、そのような形式のプロパティをどの程度の時間のアニメーションの限界に示すかを示します。数値の場合、形式のプロパティは、現在の値から指定された値に変更されます。
jQuery 1.2 では、em と % 単位を使用できます。さらに、jQuery 1.2 では、プロパティ値の前で em と % 単位を使用できます。
jQuery 1.3 では、duration が 0 に設定されている場合はアニメーションが直接実行されます。以前のバージョンではアニメーションが実行されます。
パラメータ
paramsOptions の一組には、アニメーションプロパティとその値としての形式プロパティとそのセットが含まれます。
duration (選択可能)String,Number3 の指定速度のうち 1 つの文字列("slow"、"normal"、または"fast") またはアニメーション表示時間の秒数 (例: 1000)
EASY (オプション) 使用する文字列の研磨効果の名前 (插件のサポートが必要)。jQuery は "linear" と "swing" を提供します。
コールバック (オプション) アニメーション画の完了時に実行される関数
例
説明:
点击按钮後 div 元素の几个異なる属性一同变化
HTML 代コード:

复制代代码如下:

// 一つのアニメーション画内で同時に应用三種類の效果

 $("#go").click(function(){ 
$("#block").animate({ 
幅: "90%", 
高さ: "100%", 
fontSize: "10em", 
borderWidth: 10 
}, 1000 ); 

 
説明: 
让指定元素左右移動 

HTML 代:

复制代代码如下: $("#right").click(function(){

$(".block").animate({left: ' 50px'}, "slow ");

}); 
$("#left").click(function(){ 
$(".block").animate({left: '-50px'}, "slow"); 
}); 

 
説明: 
600 秒以内に切られたセグメント落の高さと透明度 

jQuery 代:

备制代代码如下: $("p").animate({

高さ: 'トグル', 不透明度: 'トグル'

}, "遅い" ); 

 
説明: 
 500 秒で左の 50 の場所にセグメント落書きを行い、完全に清晰表示可能（透明度 1） 

jQuery 代コード:

复制代码代码如下: $("p").animate({

左: 50, 不透明度: ' show'

}、500); 

 
 説明: 
「easein」関数を使用してさまざまなアニメーション形式を提供する例。この「easein」関数を提供するために使用されている場合のみ、このパラメータが機能します。 

jQuery 代コード:

复制代码代码如下:

 
$("p").animate({ 
opacity: 'show' 
}, "slow", "easein"); 