jQueryアニメーション
jQuery アニメーション - animate() メソッド
jQuery animate() メソッドは、カスタム アニメーションを作成するために使用されます。
構文:
$(selector).animate({params},speed,callback);
必須の params パラメータは、アニメーションを形成する CSS プロパティを定義します。
オプションの速度パラメーターは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、アニメーションの完了後に実行される関数の名前です。
次の例は、animate() メソッドの簡単なアプリケーションを示しています。 <div> 要素を右に 250 ピクセル移動します:
例
<!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>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>プログラムを実行して試してください
ヒント: デフォルトでは、すべての HTML 要素は静的な位置を持ち、移動できません。 。変更する必要がある場合は、要素の位置属性を相対、固定、または絶対に設定する必要があります!
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',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#4ae936;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>プログラムを実行して試してみる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>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>プログラムを実行して試してください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({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>プログラムを実行して試してくださいjQuery animate() - キュー関数の使用
デフォルトでは、jQuery はアニメーション用のキュー関数を提供します。
これは、複数の animate() 呼び出しを次々に記述すると、jQuery はそれらのメソッド呼び出しを含む「内部」キューを作成することを意味します。次に、これらのアニメーション呼び出しを 1 つずつ実行します。
<!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(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>プログラムを実行して試してください
次の例では、<div> 要素を右に 100 ピクセル移動し、テキストのフォント サイズを大きくします。
