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 つずつ実行します。
りー
