アニメション効果

animate()

今度はタグを移動する機能について調べましょう。

上にあるピンクをボックスが色を変わりながら移動します。これがanimate()です。

animate()の使い方

jQuery

$('.hello').animate({
    top:100,
    left:200
});

上のコードはtop:200,left:200を実行するコードです。
次はhelloボックス

HTML

<div class="hello"></div>

CSS

.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}

上のようにHTML,CSS,jQueryを使います。

Source

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script>
$(function(){
    $('.hello').animate({
        top:100,
        left:200
    });
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>

時間制御

$('.class_Name').animate({
},時間);

上のソースをに5秒を適用すると

$('.hello').animate({
    top:100,
    left:200
},5000);

ではしたのコードでテストしてみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script>
$(function(){
    $('.hello').animate({
        top:100,
        left:200
    },5000);
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>

上のソースを結果を見ると5秒かかりますね。

では、上のソースがこう動いてから次に何かをするためはどうするんでしょうか。

機能が終わってからまた最初の自分の場所に移動してみる機能を作ってみましょう。

機能が終わってからまた他の機能　初め

function(){};

上の部分に animate({});の {}が終わったあとに入れます。
しかし、function(){}の前に ,を入れます。

animate({

 },function(){

 };
});

上のようになりますね。

そしてまた、何かを入れたいならそのソースをfunction(){};の{}中に入れます。

$('.hello').animate({
    top:50,
    left:50
});

上のソースを適用したら

$('.class_Name').animate({
    },function(){
        $('.hello').animate({
            top:50,
            left:50
        });
    };
);

ではコードを作ってやってみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script>
$(function(){
    $('.hello').animate({
        top:100,
        left:200
    },function(){
        $('.hello').animate({
            top:50,
            left:50
        });
    });
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
    <div class="hello"></div>
</body>
</html>

これで、アニメションは終わりです、ありがとうございます。

アニメション 効果