問題
4
jQuery
jquery UIの使い方
jQueryの問題に挑戦しよう！
問題
「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¥
期待する画面
解答と解説（jquery UIの使い方）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
まずbtnがクリックされたことをトリガーとしてexplodeを爆発させます。jquery UIのエフェクトの名前をtoggle中に文字列として記述するだけで自由に色々なエフェクトを使用できます。他にも色々なエフェクトやカスタマイズがあるので調べてみてください。とは言え少し古いものなので一部アニメーションをつけるくらいに使うのがいいですね。
