ホームページ > 記事 > ウェブフロントエンド > jQueryでのanimateの使い方と注意点

jQueryでのanimateの使い方と注意点

高洛峰オリジナル: 2016-12-28 09:31:441359ブラウズ

1. アニメーション構文構造

animate(params,speed,callback)

params: {key1:value1,key2:value2} などのスタイル属性と値を含むマッピング

speed: 速度パラメーター [オプション]

コールバック: アニメーションが完了したとき実行する関数 [オプション]

2. 簡単なアニメーションをカスタマイズする

簡単な例を使用して、div をクリックしてページ上を水平に移動する効果を説明します。

<style>
 #cube{
  position:relative;/* 不加这句元素不能动 */
  width:30px;
  height:30px;
  background:red;
  cursor:pointer;
 }
</style>
<body>
 <div>
  <div id="cube"></div>
 </div>
 <script>
  $(function(){
   $("#cube").click(function(){
    $(this).animate({left:"100px"},2000)
   })
  })
 </script>

要素を移動させるには、左の属性を変更する必要があります。要素の top、right、bottom、left 属性値に影響を与えるには、要素の位置を宣言する必要があります。

jQueryでのanimateの使い方と注意点

3. 蓄積と蓄積アニメーション

前のコードでは、属性 {left:"100px"} をパラメータとして設定していましたが、これを {left:"+=25px"} に書き換えると、効果は以下の通りです

jQueryでのanimateの使い方と注意点

4. 複数のアニメーション

複数のアニメーションを同時に実行します

上記の例は非常に単純なアニメーションです。たとえば、複数のアニメーションを同時に実行したい場合は、要素が右にスライドしている間、要素の高さが拡大されます。

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

$(this).animate({left:"+=25px",height:"+=20px"},1000)

jQueryでのanimateの使い方と注意点

5. 複数のアニメーションを順番に実行します

上記の例では、右へのスライドと高さの増加が同時に発生します。ブロックを最初に右にスライドさせますより高くするには、次のようにコード

を分割するだけです:

$(this).animate({left:"+=25px"},500)
  .animate({height:"+=20px"},500)

このようなアニメーション効果の実行には、「アニメーションキュー」と呼ばれるシーケンスがあります

jQueryでのanimateの使い方と注意点

6.包括的な例

正方形をクリックして右に移動するにつれて高さを増し、不透明度を 50% から 100% に増やし、次に上下に移動して幅を広げ、完了するとフェードアウトします。

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .fadeOut(&#39;slow&#39;)
   })

同じ要素に複数のエフェクトを適用する場合、これらのエフェクトは連鎖的にキューに入れることができます。

jQueryでのanimateの使い方と注意点

7. アニメーションコールバック関数

上記例で、フェードアウトではなく最後のステップでCSSのスタイル(背景:青)を切り替えたい場合、通常通り扱うと該当のコードが

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .css("border","5px solid blue")//改动这行
   })

ただし、 css() メソッドは早めに呼び出されます。

jQueryでのanimateの使い方と注意点

この問題の理由は、css() メソッドがアニメーションキューに追加されず、すぐに実行されるためです。コールバック関数を使用して、アニメーション化されていないメソッドのキューイングを実装できます。

関連する正しいコードは次のとおりです:

$("#cube").click(function(){
 $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
 .animate({top:"40px",width:"100px"},500,function(){
  $(this).css("border","5px solid blue")
 })
})

jQueryでのanimateの使い方と注意点

コールバックは、slideDown()、show() などのすべての jquery アニメーションメソッドに適用できることに注意してください。

まとめ

上記は、jquery での animate に関するいくつかの使用法と注意事項です。この記事の内容が皆さんの学習や仕事に役立つことを願っています。ご質問がある場合は、メッセージを残して連絡してください。 PHP 中国語 Web サイトをご利用いただきありがとうございます。

jQuery での animate の使用法と注意事項に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQueryで3次元数値の動的増加を実現（animateメソッド）次の記事：jQueryで3次元数値の動的増加を実現（animateメソッド）

続きを見る

jQueryでのanimateの使い方と注意点

関連記事