(やりたいこと)
円の図形をクリックすると、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と同じディレクトリにダウンロードしていて、
で、インストールしています。
jQueryダウンロードリンク
https://jquery.com/download/
↧