jQuery_jqueryのanimate()メソッドの使用例

この記事の例では、jQuery での animate() メソッドの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このメソッドはカスタム アニメーションを作成するために使用され、アニメーションの実行時間と消去効果を指定できます。アニメーションの完了後にコールバック関数をトリガーすることもできます。

animate() メソッドの使用法:

方法 1:

アニメーション終了スタイルのプロパティを「プロパティ名/値」オブジェクトの形式で定義します。 例:

コードをコピー コードは次のとおりです:

$("div").animate({width:"1000px" })

上記のコードは、div を元の幅から 1000px に調整できます。 「プロパティ名/値」オブジェクトの複数のセットを一度に使用することもできます。例:

コードをコピー コードは次のとおりです:

$("div").animate( {width: "1000px" ,fontSize: 20})

上記のコードは、div を元の幅から 1000 ピクセルに、元のフォント サイズを 20 ピクセルに調整できます。次の 3 つの点に特に注意する必要があります:

1. サイズに単位がない場合、デフォルトの単位は px です。
2. 属性値は二重引用符で囲む必要があります。属性値が数値の場合は省略できます。
3. font-szie やbackground-color などの属性では、中央の水平線を削除する必要があり、2 番目の単語の最初の文字を大文字にする必要があります。

animate() メソッドはアニメーション効果の継続時間を明確に指定できます。指定しない場合は、デフォルト値の Normal が使用されます。例:

コードをコピー コードは次のとおりです:

$("div").animate( {width: "1000px" ,fontSize: 20},2000)

上記のコードは、アニメーション効果が 2000 ミリ秒 (2 秒) 後に完了することを規定しています。
コールバック関数は、アニメーションの実行が完了した後に呼び出すことができます。例:

コードをコピー コードは次のとおりです:

$("div").animate( {width: "1000px" },5000 ,function(){alert("調整完了")})

上記のコードは、アニメーションの完了後にコールバック関数をトリガーできるため、プロンプト ボックスがポップアップ表示されます。
コード例:

コードをコピーします コードは次のとおりです:

アニメーションを実行 本文>





方法 2:
最初の方法では、中括弧 {} は、アニメーション速度、コールバック関数などのアニメーション終了スタイル属性を定義する場合にのみ使用され、カンマで区切られます。 2 番目に紹介する方法では、速度、コールバック関数、キューなどを中括弧 {} で囲む必要があります。
例:

コードをコピー

コードは次のとおりです:$("div").animate( {width: "1000px" }, { queue:false, period:1000,complete:function(){alert("ok")}})

キュー パラメーターは、アニメーションを実行のためにアニメーション キューに追加するかどうかを指定できます。アニメーション キューに入ると、順番に実行されます。つまり、最初のアニメーションが完了した後、キュー内の 2 番目のアニメーションが実行されます。実行されます、など。キューパラメータ値が true の場合、アニメーションは実行のためにキューに追加されます。それ以外の場合、アニメーションはキューに追加されません。
継続時間パラメータはアニメーションの継続時間を定義します。
完全なパラメータは、アニメーションのコールバック関数を定義します。
コード例:

コードをコピーします コードは次のとおりです:

$(document).ready(function(){
$("#btn1").click(function(){
$(".first").animate({width:"1000px"},{queue:true,duration:5000,complete:function a(){alert("幅設定完了")}})
.animate({fontSize:'7em'},{queue:true,duration:5000})
.animate({borderWidth:10},{queue:true,duration:5000,complete:function a(){alert("幅設定完了")}});
});

$("#btn2").click(function(){
$(".秒").animate({width:"1000px"},{queue:false,duration:1000})
.animate( {fontSize:'7em'} , 1000 )
.animate({borderWidth:10}, 1000); })
})

スクリプト ホームへようこそ

スクリプト ホームへようこそ

最初のアニメーションを実行
2 番目のアニメーションを実行