jQueryアニメーション
jQuery エフェクト - アニメーション
jQuery アニメーション - animate() メソッド
jQuery animate() メソッドは、カスタム アニメーションを作成するために使用されます。
構文:
必須の 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>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
デフォルトでは、すべての HTML 要素は静的な位置にあり、移動できません。
位置を操作する必要がある場合は、最初に要素の CSS 位置プロパティを相対、固定、または絶対に設定することを忘れないでください。
jQuery animate() - 複数の属性を操作します
アニメーション生成中に複数の属性を同時に使用できることに注意してください:
注: animate() メソッドを使用してすべての CSS プロパティを操作できますか?
はい、ほぼです！ただし、覚えておくべき重要な点が 1 つあります。animate() を使用する場合、すべてのプロパティ名を記述するには Camel 記法を使用する必要があります。たとえば、padding-left の代わりに paddingLeft を使用し、margin-right の代わりに marginRight を使用する必要があります。 。
また、カラーアニメーションはコアのjQueryライブラリには含まれていません。
カラー アニメーションを生成する必要がある場合は、jquery.com からカラー アニメーション プラグインをダウンロードする必要があります。
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>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<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({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<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(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>例の実行»
オンライン例を表示するには、[例の実行] ボタンをクリックしてください
次の例では、<div> 要素を右に 100 ピクセル移動してから、増加させます。テキストのフォント サイズ:
インスタンス
<!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>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンライン インスタンスを表示します
