【jQuery】効果-animate()方法
4743 ワード
≪インスタンス｜Instance｜emdw≫
div要素の高さを変更するには、次の手順に従います.
$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});
$(".btn2").click(function(){
$("#box").animate({height:"100px"});
});
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
</html>
と
animate() CSS 。
CSS 。CSS ， 。
（ "margin:30px"）。 （ "background-color:red"）。
： "+=" "-=" （relative animations）。
1
$(selector).animate(styles,speed,easing,callback)
， ！
パラメータ
styles
です.アニメーション を するCSSスタイルと を します. なCSSスタイルの (インスタンスを ):
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
:CSSスタイルでは、CSS (font-sizeなど)ではなくDOM (fontSizeなど)を して します.
speed
オプション.アニメーションの を します.デフォルトは「normal」です. な :
ミリ ( えば1500)"slow"
"normal"
"fast"
easing
オプション. なるアニメーションポイントでアニメーション を するeasing を します. easing :
swing
linear
プラグインにはeasing が されます.
callback
オプション.animate の が したら、 する .callbackの については、jQuery Callbackの を してください.
2
$(selector).animate(styles,options)
パラメータ
styles
です.アニメーション を するCSSのスタイルと ( )を します.
options
オプション.アニメーションの オプションを します. な :
speed-アニメーションの を するeasing- するeasing を する
callback-アニメーション に する を します.
Step-アニメーションの ステップが した に する を する
Queue-ブール . キューにアニメーションを するかどうかを します.falseの 、アニメーションはすぐにを します.
specialEasing-stylesパラメータからの1つまたは のCSS のマッピング、およびそれらの するeasing