jQueryカスタムアニメーション関数
jQuery アニメーション - animate() メソッド
jQuery animate() メソッドは、カスタム アニメーションを作成するために使用されます。
構文:
$(selector).animate({params},speed,callback);必須の params パラメータは、アニメーションを形成する CSS プロパティを定義します。
オプションの速度パラメーターは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバック パラメーターは、アニメーションの完了後に実行される関数の名前です。
次の例は、animate() メソッドの単純なアプリケーションを示しています。左属性が 250 ピクセルになるまで、<div> 要素を左に移動します。 a 静的な位置であり、移動することはできません。位置を操作したい場合は、最初に要素の CSS 位置プロパティを相対、固定、または絶対に設定することを忘れないでください。
アニメーション生成プロセス中に複数のプロパティを同時に使用できることに注意してください: <!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 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 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 からカラー アニメーション プラグインをダウンロードする必要があります。
相対値を定義することもできます (値は要素の現在の値に対する相対値です)。値の前に += または -= を追加する必要があります:
jQuery animate() - 事前定義された値を使用します プロパティの値をアニメーション化して「表示」、「非表示」、または「切り替え」することもできます: jQuery animate() - キュー関数の使用 デフォルトでは、jQuery はアニメーション用のキュー関数を提供します。これは、複数の animate() 呼び出しを続けて記述すると、jQuery がそれらのメソッド呼び出しを含む「内部」キューを作成することを意味します。次に、これらのアニメーション呼び出しを 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 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 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 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 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 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
