ボタンを押すと画像がフェードイン・フェードアウトするという動作をしたいのですが、上手く繋げれていないみたいです。多分idが必要だと思うのですが、どう打ち込むのが正解でしょうか?
以下は現時点での状態です。
初心者のためまだまだ分からないことが多いですがよろしくお願い致します。
ボタンを押すと画像がフェードイン・フェードアウトするという動作をしたいのですが、上手く繋げれていないみたいです。多分idが必要だと思うのですが、どう打ち込むのが正解でしょうか?
以下は現時点での状態です。
初心者のためまだまだ分からないことが多いですがよろしくお願い致します。
前提知識
id
は<button id="hoge">
のように宣言します。$("#hoge")
のように#
を使って表現します。class
は<button class="fuga">
のように宣言します。$(".fuga")
のように.
を使って表現します。コードレビュー
$("#btn-space").click(function(){
について、function){
に対応する閉じかっこ}
がありません。btn-space
はボタンそのものではなく、ボタンを配置しているdiv
タグです。#appear
がhtml内のid
として宣言されていません。fadeIn
するのか解釈できません。base.css
が質問文で示されていません。<head>
内でクリックイベントなどを記述していますが、教材のサンプルでもそのような記述になっていますか?<body>
の末尾に書かれてはいませんか?htmlおよびjavascriptの知識を整理して、ご自身のコードのどこが間違っているのかを推測しながら試行錯誤することが大事です。
上記を踏まえて、教材のテキストを読み直して落ち着いてがんばってください。
サンプルコード
fadeToggle
ボタンをクリックすると画像がフェードイン・フェードアウトするシンプルなサンプルコード例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フェードイン・フェードアウト</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<div>
<button id="btn-fade">fadeToggle</button>
</div>
<div>
<img class="img-fade" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAI7SURBVFhH7VXPK0RRFPaHKFbKwsJCSiipKQuFhYUSyYJkQxZTipWSUhYWlFIsJMpGLCwkwzSmQfJjaJRfYQozfoxMOPqOd6c71x3mzZv8/upbvHfePfd753z33BRHXip9Jf8F/C4B63UldL3podWqIm1cx6QJcNoy6fEmSEDo0MfPuu9UJrUCO/Z6FgBcOedpKT9N+51MSwKwgVruo6FeQwLR8Uh/VExHSwJOJ4bpKfxAvh575B1EXTrmDAlE3vaGqDUqExbgLs+l8IXf2IbIPztJzuIMjqH/8AHwdB+itRrbm/WClirgKs2moGeZNwLufDvkqSzgGFojTHl/ckCukqw360HLJlwqTOdeCzze3UbKvt1Wa7wlCrgWtKY0LcDb0cSJ1WQ4AeKPgZOxQRYnmxLv5DWgKQHyWUdZ9/s6o847yn/r3eA4cL3uopWyHLqYn+HKyGYVNCUAfUVSGUiM0yB6j78+nx43osRG3WqpjsRVJuQBjFxsgiMoA8MHm6E9e12tHH/wn3IVdHlASyaEsw8GunkTGTiCKPdGY8WH90LcAvBnu53NnFA1IMoOc+IikgFx8nc6xi0g4F400r4OF3gBvUepMWggAt+hPRhK6L0YTO8xbgHoLwwXC8/hMJ+As6lRLn8s06k05QGUHokxaDB8MFzksy8DLdPlUBlTgIAuphL3AgYRhg4uIphSjF4BdY1gUgS8RwFdDIxbgFnEyqPy5whIlAK6GPj9BSQLuj3A7yvgs/jXBaTSC91J3opQUYNpAAAAAElFTkSuQmCC">
</div>
</div>
<script>
$("#btn-fade").click(function(){
$(".img-fade").fadeToggle("slow");
});
</script>
</body>
</html>