結果を表示する
元にもどす
<html lang="ja"> <meta charset="utf-8"> <style> #楽譜{position:absolute; top:450px; left:385px; width:146px; height:350px; background-color:#ffffff; margin:20px; transition:margin 0.3s; z-index:10;} button{font-size:16px; padding:10px 20px; cursor:pointer; background-color:#456789; color:#ffffff; border:none; border-radius:5px; transition:background-color 0.3s;} button:hover{background-color:#123456;} </style> <button id="消す">ON</button> <button id="見せる">OFF</button> <hr> <img src="Ravel_01-A.png"> <div id="楽譜"></div> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(document).ready(function() {$("#消す").click(function() {$("#楽譜").animate({marginTop:"-=384px"},200);}); $('#見せる').click(function() {$("#楽譜").animate({marginTop:"+=384px"},200);});}); </script> </html>