English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
jQueryでカスタムアニメーションを作成できます。
jQuery animate()方法对一组CSS属性执行自定义动画。
这是animate()方法的语法：
$(selector).animate({styles}, duration, easing, callback)パラメータ：
{styles} -指定动画将向其移动的CSS属性和值的对象
duration -确定动画效果将运行多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定在animate()方法完成后要调用的函数
以下示例通过更改元素的宽度为元素设置动画：
$("button").click(function(){
$("div").animate({width: "500px"});
});测试看看‹/›以下の例では、要素の位置を変更することで要素にアニメーションを適用します：
$("button").click(function(){
$("div").animate({left: "500px"});
});测试看看‹/›デフォルトでは、すべてのHTML要素は静的位置を持ち、静的要素は移動できません。
位置を操作する場合は、まず要素のCSS 位置属性は相対、固定、または絶対に設定されます。
要素の複数の属性に同時にアニメーションを設定することもできます。
$("button").click(function(){
$("div").animate({
width: "500px",
height: "400px",
opacity: "0.3,
left: "50px"
});
});测试看看‹/›以下の例では、animate()を使用してdurationとeasingパラメータ：
$("button").click(function(){
$("div").animate({
width: "500px",
height: "400px"
}, 4000, "linear");
});测试看看‹/›以下の例では、animate()を使用してコールバックパラメータ：
$("button").click(function(){
$("div").animate({
width: "500px",
height: "400px"
}, 500, "linear",
function() {
$(this).after("<h2>アニメーションが完了しました</h2">
});
});测试看看‹/›animate()メソッドを使用する際に覚えておくべきポイント：
すべてのアニメーション属性は、単一の数値（例えば、幅、高さまたは左の値）に設定する必要があります。
文字列値はアニメーション（例えば、背景色）に設定できません
背景色のアニメーションを設定するには、jQueryカラープラグイン
animate()メソッドと一緒に使用する場合、属性名はキャメルケース形式でなければなりません：paddingTopを使用する代わりにpadding-top、marginLeftを使用してmargin-left、など
デフォルトでは、jQueryにはアニメーションのキュー機能があります。
キューには、実行待ちの機能が一つまたは複数あります。
これは、複数のanimate()コールを連続して記述した場合、jQueryがこれらのメソッドコールから「内部」キューを作成し、それを一つずつ実行するという意味です。
以下の例では、まずdiv要素の幅を変更し、次に高さを変更し、最後にテキストのフォントサイズを増やします：
$("button").click(function(){
let div = $("div");
div.animate({width: "500px"});
div.animate({height: "200px"});
div.animate({fontSize: "10em"});
});测试看看‹/›jQueryのリンク機能を使用して、要素の複数の属性にアニメーションを順次実行できます。
$("button").click(function(){
$("div")
.animate({width: "500px"})
.animate({height: "200px"})
.animate({fontSize: "10em"})
.animate({opacity: "0.3});
});测试看看‹/›您将在本教程的后面部分了解有关链接的更多信息。
动画属性也可以是相对的。如果为值提供了前导+=或-=字符序列，则通过从属性的当前值中添加或减去给定的数字来计算目标值。
$("p").click(function(){
$("this").animate({
fontSize: "+=5px",
padding : "+=10px"
});
});测试看看‹/›此外，我们甚至可以指定属性的动画值"show"，"hide"或"toggle"：
$("button").click(function(){
$("div").animate({height: "toggle"});
});测试看看‹/›有关完整的效果参考，请访问我们的jQuery 效果参考手册。