jQueryでのanimateの使い方と注意点-jsチュートリアル-php.cn

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

高洛峰

リリース： 2016-12-28 09:31:44

オリジナル

1368 人が閲覧しました

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の使い方と注意点