jQueryアニメーションの紹介 – Javascriptライブラリ | テックコード -web関連の情報サイト-

1. フェードイン・フェードアウト

フェード効果を使って要素を表示・非表示にするシンプルなアニメーションです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>フェードイン・フェードアウト</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#fadeInButton").click(function(){
                $("#box").fadeIn(1000);
            });
            $("#fadeOutButton").click(function(){
                $("#box").fadeOut(1000);
            });
        });
    </script>
</head>
<body>
    <button id="fadeInButton">フェードイン</button>
    <button id="fadeOutButton">フェードアウト</button>
    <div id="box" style="width:100px;height:100px;background-color:red;display:none;"></div>
</body>
</html>

2. スライドダウン・スライドアップ

スライド効果を使って要素を表示・非表示にするアニメーションです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>スライドダウン・スライドアップ</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideDownButton").click(function(){
                $("#box").slideDown(1000);
            });
            $("#slideUpButton").click(function(){
                $("#box").slideUp(1000);
            });
        });
    </script>
</head>
<body>
    <button id="slideDownButton">スライドダウン</button>
    <button id="slideUpButton">スライドアップ</button>
    <div id="box" style="width:100px;height:100px;background-color:blue;display:none;"></div>
</body>
</html>

3. カスタムアニメーション

animate()メソッドを使用してカスタムアニメーションを作成することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>カスタムアニメーション</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#animateButton").click(function(){
                $("#box").animate({
                    width: "300px",
                    height: "300px",
                    opacity: 0.5
                }, 1000);
            });
        });
    </script>
</head>
<body>
    <button id="animateButton">アニメーション</button>
    <div id="box" style="width:100px;height:100px;background-color:green;"></div>
</body>
</html>

4. チェーンアニメーション

複数のアニメーションを連続して実行することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>チェーンアニメーション</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#chainButton").click(function(){
                $("#box").slideUp(1000).slideDown(1000).fadeOut(1000).fadeIn(1000);
            });
        });
    </script>
</head>
<body>
    <button id="chainButton">チェーンアニメーション</button>
    <div id="box" style="width:100px;height:100px;background-color:purple;"></div>
</body>
</html>