jqueryアニメーションエフェクト学習メモ(8つのエフェクト)

1. 要素の表示と非表示

表示:なし
表示:表示

メソッドの表示と非表示を簡単に行うことができます

a) show() show
b) 隠す() 隠す
c) toggle() スイッチ、表示から非表示、非表示から表示

<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").hide();//display:none
    //document.getElementById('id').style.display="none";
  }
  function f2(){
    //显示
    $("div").show();//display:block
  }
  function f3(){
    $("div").toggle();
  }
</script>
<style type="text/css">
   div {width:300px; height:200px; background-color:blue;}
</style>
 <body>
   <div>duck and dog</div>
   <input type="button" value="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
</body>

ログイン後にコピー

CSS は、要素の表示と非表示を制御する際に、表示スタイルと表示スタイルを使用する 2 つの方法をサポートしていますが、結果は異なります。
具体的な手順は次のとおりです:

要素を非表示にする場合、可視性属性はドキュメントフロー内の要素の影響も保存し、要素の不明な部分は非表示後も変更されません。この属性には、表示 (デフォルト) と非表示の 2 つの値が含まれます。
表示を非表示にすると、非表示の要素はドキュメントの位置を占めなくなります。

2. スライド効果の表示と非表示

slideUp(speed[,callback]) は要素を上にスライドさせ、最終的に要素を非表示にします
slideDown(speed[,callback]) は要素を下にスライドさせ、最後に
slideToggle(speed[,callback])

速度: エフェクトの速度を設定します (遅い (600) 通常 (400) 速い (200) 時間 (ミリ秒))
Callback: エフェクト実行後に自動的に呼び出されるコールバック関数

<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").slideUp(3000,function(){
      alert('我消失了，你能看到么');
    });
  }
  function f2(){
    //显示
    $("div").slideDown(3000,function(){
      alert('我又回来了');
    });//display:block
  }
  function f3(){
    $("div").slideToggle(1000);
  }
  $(function(){
    //气缸滑动效果
    //setInterval("f3()",1000);
  });
</script>

<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>


<body>
   <div>duck and dog</div>
   <input type="button" value="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
 </body>

ログイン後にコピー

3. フェード効果

特定の透明度の変更を通じて要素の表示と非表示を許可します

フェードイン(速度, [コールバック])
フェードアウト(速度, [コールバック])
fadeToggle(speed, [callback]) スイッチエフェクト
fadeTo(speed, opacity, [callback]) は div を特定の透明度 (0-1) に設定します。0.3 は 30% の透明度です

<script type="text/javascript"> 
  function f1(){
    //隐藏
    $("div").fadeOut(4000);
  }
  function f2(){
    //显示
    $("div").fadeIn(4000);
    $("#two").fadeTo(2000,0.3);
  }

  function f3(){
    $("div").fadeToggle(2000);
  }

</script>
<style type="text/css">
  div {width:300px; height:200px; background-color:blue;}
</style>
<body>
  <div id = "two">duck and dog</div>

  <input type="button" value="隐藏" onclick="f1()" />
  <input type="button" value="显示" onclick="f2()" />
  <input type="button" value="开关效果" onclick="f3()" />
</body>

ログイン後にコピー

透明度を設定します。div の透明度は 30% です:

4. アニメーション効果の基礎となるメソッド animate()

show() Hide() およびその他のアニメーション効果は、内部で animate() メソッドを実行します

$().animate(css效果参数[，时间][，回调函数]);

ログイン後にコピー

css() などの一般的な jquery メソッドは、実行後に現在の jquery オブジェクトを返すため、多くの jquery メソッドをチェーンで呼び出すことができます。

 <script type="text/javascript">
  function f1(){
    //文字大小、文字粗体、div本身宽度和高度
    //font-size background-color color

    console.log($("div"));
    //jquery对象调用完毕css方法本身还是一个jquery对象
    //说明css方法执行完毕有return this关键字
    console.log($("div").css('font-weight','bold').css("background-color",'pink')); 

    var jn = {'font-size':'30px',width:'400px',height:'300px'};
    $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);

    //$("div").animate(jn,2000);
  }

</script>

<style type="text/css">
  div {width:300px; height:200px; background-color:blue; }
</style>

<body>
  <div>duck and dog</div>
  <input type="button" value="设置" onclick="f1()" />
</body>

ログイン後にコピー

5. 加算と減算のアニメーション

アニメーションが左に設定されている場合: 一度に 500 ピクセル、div の最初のクリックは左に 500 ピクセル移動し、2 回目のクリックは移動しません。加算、加算、減算は、左: "500px" を左: " =500px" または左: "-=500px" に変更するだけです。

(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "+=500px"}, 3000); 
  }) 
})</span>

ログイン後にコピー

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

1. 複数のアニメーションを同時に実行します
上記の例は left 属性の変更のみを制御します。今回は left 属性を制御するときに、要素の高さも 200px に制御します。

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px",height:"200px"}, 3000); 
  }) 
})

ログイン後にコピー

2. アニメーションを順番に実行します

上記の例では、要素を右に移動するアニメーションと高さを拡大するアニメーションを同時に実行しています。次に、最初に右に移動してから高さを拡大する必要があります。これは、上記の animate() メソッドを 2 つの

に分割するだけです。

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px"},3000) 
       .animate({height:"200px"},1000); 
  }) 
})

ログイン後にコピー

3. 総合アニメーション

次に、より複雑なアニメーションが実行されます。 div 要素をクリックして右に移動し、高さを上げて不透明度を 50% から 100% に切り替えます。そして幅を大きくしながら上から下に動かしていくと完成します
。一定の効果の後、フェードアウトして非表示になります。

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000) 
       .fadeOut(1000); 
  }) 
})

ログイン後にコピー

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

上記の例では、最後のステップで要素を非表示にする代わりに CSS スタイルを切り替えたい場合。これで、animate

の 3 番目のパラメーターのコールバック関数を使用できるようになりました。

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")}); 

  }) 
})

ログイン後にコピー

これにより、CSS メソッドがアニメーションキューに追加されます。

8. アニメーションを停止し、アニメーション状態であるかどうかを確認します

1. 要素

のアニメーションを停止します。

stop([clearQueue][,gotoEnd]) どちらもオプションのパラメータで、どちらもブール型です
パラメータの説明:

clearQueue: 未完了のアニメーションキューをクリアするかどうかを表します
gotoEnd: 実行中のアニメーションの終了状態にジャンプするかどうかを表します
stop() メソッドのこれら 2 つのパラメーターについては、包括的な例を通じて理解できます。

<style type="text/css"> 
  *{margin:0;padding:0;}  
  body { font-size: 13px; line-height: 130%; padding: 60px } 
  #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;} 
  .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;} 
  .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;} 
</style> 
<script src="../../../scripts/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
  $(function(){ 
     $("button:eq(0)").click(function () { 
       $("#panel") 
        .animate({height : "150" } , 2000 ) 
        .animate({width : "300" } , 2000 ) 
        .hide(3000) 
        .animate({height : "show" , width : "show" , opacity : "show" } , 2000 ) 
        .animate({height : "500"} , 2000 ); 
     }); 
     $("button:eq(1)").click(function () { 
       $("#panel").stop();//停止当前动画，继续下一个动画 
     }); 
     $("button:eq(2)").click(function () { 
       $("#panel").stop(true);//清除元素的所有动画 
     }); 
     $("button:eq(3)").click(function () { 
       $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画 
     }); 
     $("button:eq(4)").click(function () { 
       $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态  
     }); 

  }) 
</script> 

<body> 
  <button>开始一连串动画</button> 
  <button>stop()</button> 
  <button>stop(true)</button> 
  <button>stop(false,true)</button> 
  <button>stop(true,true)</button> 
  <div id="panel"> 
    <h5 class="head">三国杀杀天下</h5> 
    <div class="content"> 
      夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情 
    </div> 
  </div> 
</body> 
</html>

ログイン後にコピー

2. 要素がアニメーション状態であるかどうかを判断します

animate() メソッドを使用する場合、アニメーションの蓄積によって生じるアニメーションとユーザーの動作の不一致を回避します。アニメーションの蓄積は、ユーザーが要素に対して animate() アニメーションをすばやく実行すると発生します。

解決策は、要素がアニメーション状態にあるかどうかを判断し、アニメーション状態にない場合にのみ要素に新しいアニメーションを追加することです。
使用法:

if(!$(element).is(":animated")){ 
  //添加新的动画 
}

ログイン後にコピー

この記事の 8 つの jquery アニメーション効果の詳細な分析を通じて、jquery アニメーション効果を使って遊ぶことができます。jquery アニメーション効果の包括的な紹介を提供するこの記事を気に入っていただければ幸いです。

jqueryアニメーションエフェクト学習メモ(8つのエフェクト)_jquery