jQuery
jQuery .animate（）メソッド

構文

1. （セレクタ）.animate（{styles}、{options}）

パラメーター

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

時折、単語の位置を変更したり、単語のサイズを縮小したり、単語の色を自動的に変更して、ウェブサイトやウェブアプリの魅力を向上させる必要があります。 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>");
     }
  });