jQuery エフェクト - アニメーション

animate() メソッド

jQuery animate() メソッドは、カスタムアニメーションを作成するために使用されます。

構文:

$(selector).animate({params},speed,callback);

必須の params パラメータは、アニメーションを形成する CSS プロパティを定義します。

オプションの速度パラメーターは、エフェクトの持続時間を指定します。「slow」、「fast」、またはミリ秒の値を取ることができます。

オプションのコールバックパラメータは、アニメーションの完了後に実行される関数の名前です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>向右移动</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

注:

デフォルトでは、すべての HTML 要素は静的な位置にあり、移動できません。
位置を操作する必要がある場合は、最初に要素の CSS 位置プロパティを相対、固定、または絶対に設定することを忘れないでください。

animate() - 複数のプロパティを操作する

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script> 
</head>
<body>
<button>开始动画</button>
<p>逐渐变大</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

animate() メソッドを使用してすべての CSS プロパティを操作できますか?
はい、ほぼです！ただし、覚えておくべき重要な点が 1 つあります。animate() を使用する場合、すべてのプロパティ名を記述するには Camel 記法を使用する必要があります。たとえば、padding-left の代わりに paddingLeft を使用し、margin-right の代わりに marginRight を使用する必要があります。。また、カラーアニメーションはコアのjQueryライブラリには含まれていません。

animate() - 相対値を使用します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
</head>
 <body>
<button>开始动画</button>
<br><br>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

animate() - 事前定義された値を使用します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 
</head>
 <body>
<button>开始动画</button>
<p>收起</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

animate() - キュー機能を使用します

デフォルトでは、jQuery はアニメーションにキュー機能を提供します。

これは、複数の animate() 呼び出しを次々に記述すると、jQuery はそれらのメソッド呼び出しを含む「内部」キューを作成することを意味します。次に、これらのアニメーション呼び出しを 1 つずつ実行します。

りー

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("button:first").click(function() { $("#block").animate({ left: "-=80px" //相对左移 }, 300); }); $("button:last").click(function() { $("#block").animate({ left: "+=80px" //相对右移 }, 300); }); }); </script> <style type="text/css"> div { background-color: #FFFF00; height: 40px; width: 80px; border: 1px solid #000000; margin-top: 15px; padding: 15px; text-align: center; position: absolute; } </style> </head> <body style="margin-left:200px;"> <button><--GO</button> <button>Go--></button> <div id="block">动画！</div> </body> </html>

提出するリセットコード

自動運転