jQuery animate要素をアニメーションさせる
jQuery animate要素をアニメーションさせる
animateの英語の意味は
生命を吹き込む,活気づける、活発にする、励ます、動画にする
この関数はしてした要素をアニメーションされます。
サンプル
$(“セレクタ”).animate({“プロパティ”:”値”},アニメーションの時間,値の変化量,関数ポインタを渡す)
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(function(){
$(“.botton”).click(function(){ $(“img”).animate({“width”:”1000px”})
});});
</script>
<title>
</title>
</head>
<body>
<input type=”button” value=”botton” class= “botton” >
<div>
<img src=”leaf.jpg” width=”480″ height=”640″ alt=”葉っぱ”>
</div>
</body>
</html>
実行結果は
img要素が大きく1000pxになるまでアニメーションされてます。
ゴールから考えてプロパティを設定すればいいと思う。
例えばマージンを設定したら要素自体が動くよね。
サンプル
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(function(){
$(“.botton”).click(function(){ $(“img”).animate({margin-top”:”1000px”})
});});
</script>
<title>
</title>
</head>
<body>
<input type=”button” value=”botton” class= “botton” >
<div>
<img src=”leaf.jpg” width=”480″ height=”640″ alt=”葉っぱ”>
</div>
</body>
</html>
実行結果は下にアニメーションしながら要素が下がります。
消えたみたいですがスクロールしたら要素があります（笑）
その動きをアニメーションされて実行されるみたいなイメージ。
第一引数だけ{}を忘れないでね。
複数の設定をしたいときは,でつなげばいいんだ。
あくまで第一引数だから複数でも{}の中に書いてね。
引数は省略できます。
