サーチ…


構文

  1. (セレクタ).animate({styles}、{options})

パラメーター

パラメータ詳細
プロパティアニメーションが向かうCSSのプロパティと値のオブジェクト
期間 (デフォルト:400)アニメーションの実行時間を決定する文字列または数値
イージング (デフォルト:swing)トランジションにどのイージング関数を使用するかを示す文字列
コンプリートアニメーションが完了したら呼び出す関数。一致した要素ごとに1回呼び出されます。
開始アニメーションの開始時に実行される関数を指定します。
ステップアニメーションの各ステップで実行される関数を指定します。
キューエフェクトキューにアニメーションを配置するかどうかを指定するブール値。
進捗アニメーションの各ステップの後に実行される関数を指定します。
完了アニメーションが終了したときに実行される関数を指定します。
失敗しますアニメーションが完了しなかった場合に実行される関数を指定します。
スペシャル・エイジングスタイルパラメータからの1つまたは複数のCSSプロパティのマップ、および対応するイージング関数。
常にアニメーションが完了せずに終了した場合に実行される関数を指定します。

コールバック付きアニメーション

時折、単語の位置を変更したり、単語のサイズを縮小したり、単語の色を自動的に変更して、ウェブサイトやウェブアプリの魅力を向上させる必要があります。 JQueryはfadeIn(), hide(), slideDown()を使用してこのコンセプトに多くの助けをしますが、その機能は限られており、それに割り当てる特定のタスクのみを行っています。

Jqueryは.animate()という驚くほど柔軟なメソッドを提供することでこの問題を解決しています。このメソッドを使用すると、境界を越えて飛ぶ許可を与えるcssプロパティを使用するカスタムアニメーションを設定できます。たとえば、CSSスタイルのプロパティにwidth:200; DOM要素の現在の位置は50です。アニメーションメソッドは、指定されたCSS値から現在の位置値を減らし、その要素を150にアニメートします。アニメーションエンジンが処理するので、この部分について気にする必要はありません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $("#btn1").click(function(){
        $("#box").animate({width: "200px"});
    });
</script>

<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>

.animate()メソッドで使用できるcssスタイルのプロパティのリスト。

backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing,  wordSpacing, lineHeight, textIndent, 

.animate()メソッドで指定された速度。

milliseconds (Ex: 100, 1000, 5000, etc.), 
"slow", 
"fast"

.animate()メソッドで指定されたイージング。

"スイング"
"リニア"

複雑なアニメーションオプションの例をいくつか示します。

例:1:

$( "#book" ).animate({
  width: [ "toggle", "swing" ],
  height: [ "toggle", "swing" ],
  opacity: "toggle"
 }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
});

例2:

  $("#box").animate({
     height: "300px",
     width: "300px"
     }, {
     duration: 5000,
     easing: "linear",
     complete: function(){
        $(this).after("<p>Animation is complete!</p>");
     }
  });


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow