jquery UIの使い方

Question

問題4：jquery UIの使い方

これまでは自分でjqueryで一から作りたいアニメーションを作っていましたが、実はjqueryにはjquery UIという便利なサービスがあります。これはその名の通り、UIに特化したjqueryのライブラリ（javascriptのライブラリ）です。今回はこれを使ってみましょう。まず、head内に"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"をlinkで読み込んでください。そしてbodyの最後にjqueryのファイルに加えて"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"をscriptで読み込んでください。これで準備は完了です。

あらかじめエディタに書くコード

                <div class="btn">ここをクリック</div>
<div class="explode">爆発</div>
¥HTML¥

                .btn{
  text-align: center;
  width: 200px;
  height: 50px;
  line-height: 50px;
  border: 2px solid black;
  cursor: pointer;
}
.explode{
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 2px solid black;
  margin-top: 30px;
}
¥CSS¥

Answer 1

解答ソースコード

              $(function () {
  $(".btn").click(function(){
    $(".explode").toggle("explode");
  });
});
¥JavaScript¥

jquery UIの使い方

問題4：jquery UIの使い方

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説