jQueryアニメーション処理まとめ

私は 1 年以上フロントエンド関連の仕事に取り組んでいます。上司が若々しくてダイナミックな効果を追求しているため、ページ要素を単に非表示にしたり表示したりするだけでは済みません。そのため、私が見つけたアニメーション効果をよく使用します。 jQuery アニメーションはとても使いやすいです。よく使用されるものをいくつかまとめてみましょう。使用するたびに API を確認する必要がなくなるといいですね

queue()/dequeue()

これら 2 つのメソッドは隠されたものと同じです。 Ajax の XMLHttpRequest オブジェクトとして知られており、一般の人には知られていません。これら 2 つのメソッドは、アニメーション処理で非常に便利です。よくこのようなコードを書きます

$('#test').animate({            "width": "300px",            "height": "300px",            "opacity":"1"
        });

このように、テスト p の高さ、幅、不透明度を同時に変更したくない場合があります。同期的に実行するには、形状の変化と透明度の変化を分けて、最初は 300*300 p になり、その後、透明度が徐々に変化するように書く必要があります

$('#test').animate({            "width": "300px",            "height": "300px",
        }, function () {
            $('#test').animate({ "opacity": "1" });
        });

。アニメーション プロセスが 10 個あります。そのコードは何ですか? このようにして、すべてのプロセス メソッドに対してキューを作成し、関数を順番に呼び出すことができます。最初の構文

queue( [queueName ], newQueue ) 操作が実行されようとしています Queue メソッド

最初のパラメータはキュー名です。書かれていない場合、デフォルトは fx

です。すべてのキュー関数を格納するための関数配列にすることも、キューに追加するためのコールバック関数にすることもできます 新しい関数

dequeue( [queueName ] ) 一致する要素に対してキュー内の次の関数を実行します

これが実行されるたびにメソッドが呼び出され、キュー内の次の関数が実行されます

var q = [            function () {
                $(this).animate({                    "width": "200px",                    "height":"200px"
                }, next)
            },            function () {
                $(this).animate({                    "width": "400px",                    "height": "400px"
                }, next);
            }
        ];        function next(){
            $('#test').dequeue('myQueue');
        }

        $('#test').queue('myQueue', q);
        next();

上記のコードでは、最初に test p を変更できます。これは 200*200 になり、次に 400*400 になります。各アニメーションはコールバック関数を実行し、次の関数を呼び出します。実行中に関数を追加したい場合は、次のようにすることができます

var q = [            function () {
                $(this).animate({                    "width": "200px",                    "height":"200px"
                }, next)
            },            function () {
                $(this).animate({                    "width": "400px",                    "height": "400px"
                }, next);
            }
        ];        function next(){
            $('#test').dequeue('myQueue');
        }

        $('#test').queue('myQueue', q);
        next();
        $('#test').queue('myQueue',function () {
            $(this).slideUp().dequeue('myQueue');
        });

つまり、これら 2 つのメソッドは、アニメーションの実行を容易にするためのものです。あらかじめ決められた順序

clearQueue() /stop()

この2つのメソッドは主にアニメーションをキャンセルするためのメソッドです

clearQueue( [queueName ] ) Queueをクリアする関数です

stop( [queue ] [, clearQueue ] [, JumpToEnd ] ) は進行中のアニメーションを停止するために使用されます

queue: 進行中のアニメーションキューの名前

clearQueue: デフォルト値は false、キューにするかどうか またクリアされます

jumpToEnd: デフォルト値は false、キューにするかどうかアニメーションをすぐに実行します

今アニメーションを停止したい場合は、次のように記述できます

$('#test').clearQueue('myQueue');

このように書いてもアニメーションは終了しませんが、現在のアニメーションが実行された後は、いいえ、次のアニメーションが実行されますキューが再び呼び出されます (キューはクリアされ、次のキューはありません)。アニメーションをすぐに停止したい場合は、次のように記述できます

$('#test').stop();

アニメーションを停止して一時停止するかどうかについては、すぐに実行するには、 stop を設定する必要があります。 () のパラメータは

slideDown()/slideUp()/slideToggle()です。

スライドエフェクトはアニメーション、特にメニューを実行するときによく使用されます。これらの 3 つの関数は非常にシンプルです。つまり、要素は折りたたむ/展開する/自動的に折りたたむか伸縮するかを決定しますが、そのパラメーターは持続時間だけではなく、この Sanger関数パラメーター の概要を見てください。 slideUp の例を見てみましょう

slideUp( [duration ] [, easing ] [, complete ] ) イージングは​​、これを手動で変更したことはありません。デフォルトでアニメーションを完了するための

slideUp(options)

オプションで一般的に使用される設定には、

duration:アニメーション時間

queue:上記を読むと理解できるでしょう

step:が実行されるたびに実行されますpropertyはアニメーションプロセス中に変更されます

complete:アニメーションが完了したときに実行されます

start:アニメーションが開始されたときに実行されます

always:アニメーションが終了したとき、または事故が発生して実行が完了しなかったときに発生します

これら 3 つの関数は、sideUp() の実行後に要素の高さを変更します。

fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo を使用すると、高さが復元され、ダイアログが none に設定されます。 ()

fadeIn()/fadeOut()/fadeToggle()は一つ一つ説明しませんが、fadeOut()以降の3つの関数が変更されます。関数が実行されると、要素の不透明度が復元され、display属性が none に設定されます

fadeTo(duration, opacity [, easing ] [, complete ] ) fadeTo() メソッドはそれほど複雑ではありませんが、 fadeTO() の継続時間と不透明度は省略できず必ず記述する必要があります

show()/ hide()/ toggle()

这三个函数的用法和slide系列一样，但是在效果上有几点儿不同

1.如果参数duration不写，那么回立即执行没有动画

2.这个动画同时修改height、width、opacity属性

3.hide()执行完成后会将height、width、opacity属性还原，并把display设为none

animate()

有些复杂的动画靠上面几个函数不能够实现，这时候就是强大的animate派上用场的时候了,animate()有两种用法

.animate( properties [, duration ] [, easing ] [, complete ] )

大部分属性都不用解释，properties是个json，属性的值可以是字面量、function、”toggle”、简单表达式，如果是function会把返回值赋给属性，熟悉jQuery的同学肯定明白“toggle”是什么，就是让一个属性在初始值和最小值之间切换，能够使用toggle的属性有width、height、opacity等包含数字值属性，简单表达式是+=、-=等，比如可以这么些 “width”:”+=10px”。

$( "#block" ).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "+=10px"
  }, 1500 );

如果传入了回掉函数，该函数会在动画执行完后调用

.animate( properties, options )

这种用法更为灵活，properties和前一个用法一样，常用options有

duration：动画时间

queue：function队列

step：每次属性调整的回掉函数

complete：完成动画的回掉函数

start：动画开始的时候调用

always：动画被终止或者意外发生没有执行完时发生

要不说jQuery好用，上面这几个配置是不是很熟悉呢

$( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<p>Animation complete.</p>" );
    }
  });

hover()

严格说这个并不是个动画函数，但是由于低版本IE的hover对很多元素都不起作用，用CSS无法完成很多动作，所以经常需要使用JavaScript进行haver事件的处理。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

方法很简单，不多介绍了，这样就能把mousein 和mouseout写在一起了。

以上がjQueryアニメーション処理まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。