jQueryのアニメーション機能を使ってできること

.NET開発者のためのブログメディア

Webサイトを作成していると、「途中でボックスの色を変えたいな」「ここをフェードインさせたいな」と思うことがあるのではないでしょうか。そこで、ぜひ活用してほしいのがjQueryのアニメーション機能です。「animate関数」という関数を使えば、どのタイミングで、どれくらいの速さで、などの設定を行いながら、数行でアニメーションを実装することができます。

PG: アニメーションと聞くとすごくハードルが高そうですけど……。

PM: 大丈夫ですよ。jQueryでは「ここにアニメーションを設定して」という要素を指定するだけで、簡単に要素を動かしたり色を変えたりすることができます。

jQueryのanimate関数とは？

jQueryでは、アニメーションを作るための関数として「animate関数」というものが用意されています。「animate関数」とは、jQuery1.4から追加された、CSSの値を指定してアニメーションを表現する機能です。他にも、toggleやhideなどの関数が存在しますが、より柔軟に要素を動かしたい場合は「animate関数」が最適です。

animate関数を使うと、以下のようなことが簡単にできます。

・要素をフェードインまたはフェードアウトする
・画面をスクロール時にボックスの色を変化させる
・ユーザーが画面一番下までスクロールしたときに「トップへ戻る」を表示する

animate関数を実際に使ってみよう

animate関数について理解できたところで、ここでは実際にアニメーションを作っていきたいと思います。

<!DOCTYPE html>
<html>
<head>
    <title>animate sample</title>
    <!-- jQueryを読み込む -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- アニメーションの実装：ここから -->
    <script>
    $(document).ready(function(){
        // btn1をクリックしたら縦横を500pxにする
        $("#btn1").click(function(){
            $("#box").animate({height:"500px", width:"500px"});
        });
        // btn2をクリックしたら縦横を50pxにする
        $("#btn2").click(function(){
            $("#box").animate({height:"50px", width:"50px"});
        });
    });
    </script>
    <!-- アニメーションの実装：ここまで -->
</head>
<body>
    <button id="btn1">拡大</button>
    <button id="btn2">縮小</button>
    <div id="box" style="background:#ff7f50; height:50px; width:50px; margin:10px;"></div>
</body>
</html>