jQueryカスタムアニメーション関數(shù)
jQuery アニメーション - animate() メソッド
jQuery animate() メソッドは、カスタム アニメーションを作成するために使用されます。
構文:
$(selector).animate({params},speed,callback);必須の params パラメータは、アニメーションを形成する CSS プロパティを定義します。
オプションの速度パラメーターは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバック パラメーターは、アニメーションの完了後に実行される関數(shù)の名前です。
次の例は、animate() メソッドの単純なアプリケーションを示しています。左屬性が 250 ピクセルになるまで、<div> 要素を左に移動します。 a 靜的な位置であり、移動することはできません。位置を操作したい場合は、最初に要素の CSS 位置プロパティを相対、固定、または絶対に設定することを忘れないでください。
アニメーション生成プロセス中に複數(shù)のプロパティを同時に使用できることに注意してください: <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
ヒント: animate() メソッドを使用できます。ただし、すべての CSS プロパティを操作するには、覚えておくべき重要な點が 1 つあります。animate() を使用する場合、すべてのプロパティ名は Camel 表記法を使用して記述する必要があります。たとえば、padding-left の代わりに paddingLeft を、margin- の代わりに marginRight を使用する必要があります。そうですね、などまた、カラー アニメーションは、コアの jQuery ライブラリには含まれていません。カラー アニメーションを生成する必要がある場合は、jQuery.com からカラー アニメーション プラグインをダウンロードする必要があります。
相対値を定義することもできます (値は要素の現(xiàn)在の値に対する相対値です)。値の前に += または -= を追加する必要があります:
jQuery animate() - 事前定義された値を使用します プロパティの値をアニメーション化して「表示」、「非表示」、または「切り替え」することもできます: jQuery animate() - キュー関數(shù)の使用 デフォルトでは、jQuery はアニメーション用のキュー関數(shù)を提供します。これは、複數(shù)の animate() 呼び出しを続けて記述すると、jQuery がそれらのメソッド呼び出しを含む「內(nèi)部」キューを作成することを意味します。次に、これらのアニメーション呼び出しを 1 つずつ実行します。 例: 別々のアニメーションを次々に実行したい場合は、キュー機能を利用したいです<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.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 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.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 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
