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("調整完了")})

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

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

<頭>





<スクリプトタイプ="text/javascript"> $(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 番目のアニメーションを実行

アニメーション キューに参加した場合と参加しなかった場合の実行効果を比較できます。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。