More than 3 years have passed since last update.

jQuery 図形をクリックすると大きさが変わるアニメーション

Last updated at 2021-09-25Posted at 2021-09-25

(やりたいこと)
円の図形をクリックすると、2,000ミリ秒かけて大きさが変わる。

width: 100px
height: 100px
　　　↓
width: 400px
height: 400px

(コード)

test.html

<!DOCTYPE html>

<html>
    <head>
        <style>
            #circle{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: red;
        </style>
    </head>
    <body>
        <script src="jquery-3.6.0.min.js"></script>
        
        <div id="circle"></div>

        <script type="text/javascript">
            $("#circle").click(function(){
         $("#circle").animate({width:"400px",height:"400px"},2000);
            })
        </script>
    </body>
</html>

(備考)
jQueryは、上記のtest.htmlと同じディレクトリにダウンロードしていて、

<script src="jquery-3.6.0.min.js"></script>

で、インストールしています。

jQueryダウンロードリンク
https://jquery.com/download/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up