jQueryアニメーション_animate()メソッド
26106 ワード
一、jQuery animate()メソッドは、カスタムアニメーションを作成するために使用されます.
必要なparamsパラメータは、アニメーションを形成するCSSプロパティを定義します.
オプションのspeedパラメータは、効果の時間を規定します.「slow」、「fast」、またはミリ秒の値を指定できます.
オプションのcallbackパラメータは、アニメーションが完了した後に実行される関数名です.
デフォルトでは、すべてのHTML要素に静的な場所があり、移動できません.位置を操作する場合は、まず要素のCSS positionプロパティをrelative、fixed、absoluteに設定することを覚えておいてください.
二、jQuery animate()-複数の属性を操作する
アニメーションの生成中に複数のアトリビュートを同時に使用することができます.
ほとんどのcssプロパティは設定できますが、animate()を使用する場合は、camelタグ法を使用してすべてのプロパティ名を書く必要があります.たとえば、padding-leftではなくpaddingLeftを使用し、margin-rightではなくmargin-rightを使用する必要があります.
カラーアニメーションは、コアjQueryライブラリには含まれません.カラーアニメーションを生成する必要がある場合は、jQuery.からcomはColor Animationsプラグインをダウンロードします.
三、jQuery animate()-相対値の使用
要素の現在の値に対して相対値を定義することもできます.値の前に+=または-=を付ける必要があります.
四、jQuery animate()-定義済みの値を使用
アトリビュートのアニメーション値をshow、hide、toggleに設定できます.
五、jQuery animate()-キュー機能の使用
相互の後に複数のanimate()呼び出しが記述されている場合、jQueryはこれらのメソッド呼び出しを含む「内部」キューを作成します.次に、これらのanimate呼び出しを1つずつ実行します.
必要なparamsパラメータは、アニメーションを形成するCSSプロパティを定義します.
オプションのspeedパラメータは、効果の時間を規定します.「slow」、「fast」、またはミリ秒の値を指定できます.
オプションのcallbackパラメータは、アニメーションが完了した後に実行される関数名です.
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("div").animate({
top:'500px'/*css display:block CSS position relative、fixed absolute。*/
});
});
</script>
</head>
<body>
<div style="height:100px; width:200px; border:2px solid #0F0; position:relative; background:red; display:block"></div>
</body>デフォルトでは、すべてのHTML要素に静的な場所があり、移動できません.位置を操作する場合は、まず要素のCSS positionプロパティをrelative、fixed、absoluteに設定することを覚えておいてください.
二、jQuery animate()-複数の属性を操作する
アニメーションの生成中に複数のアトリビュートを同時に使用することができます.
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px',
fontSize:'30px'
});
});
</script>
</head>
<body>
<div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>ほとんどのcssプロパティは設定できますが、animate()を使用する場合は、camelタグ法を使用してすべてのプロパティ名を書く必要があります.たとえば、padding-leftではなくpaddingLeftを使用し、margin-rightではなくmargin-rightを使用する必要があります.
カラーアニメーションは、コアjQueryライブラリには含まれません.カラーアニメーションを生成する必要がある場合は、jQuery.からcomはColor Animationsプラグインをダウンロードします.
三、jQuery animate()-相対値の使用
要素の現在の値に対して相対値を定義することもできます.値の前に+=または-=を付ける必要があります.
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'+=100px',/* */
width:'+=150px',
fontSize:'+=30px'
});
});
</script>
</head>
<body>
<div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>四、jQuery animate()-定義済みの値を使用
アトリビュートのアニメーション値をshow、hide、toggleに設定できます.
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("div").animate({
height:'toggle'
});
});
</script>
</head>
<body>
<div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>五、jQuery animate()-キュー機能の使用
相互の後に複数のanimate()呼び出しが記述されている場合、jQueryはこれらのメソッド呼び出しを含む「内部」キューを作成します.次に、これらのanimate呼び出しを1つずつ実行します.
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
var div=$("div");
div.animate({left:'400px',opacity:'0.5',height:'+=500px',width:'+=550px',fontSize:'+=100px'},'show');
div.animate({left:'100px',opacity:'0.5',height:'100px',width:'150px',fontSize:'20px'},'show');
div.animate({left:'400px',opacity:'0.5',height:'+=700px',width:'+=750px',fontSize:'+=120px'},'show');
div.animate({left:'100px',opacity:'0.5',height:'100px',width:'150px',fontSize:'20px'},'show');
});
</script>
</head>
<body>
<div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body><script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
var div=$("div");
div.animate({left:'400px',opacity:'0.5',height:'+=100px',width:'+=150px'},'show');
div.animate({fontSize:'3em'},'show');
});
</script>
</head>
<body>
<div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>