I want to do the action of fading in and out of the image when I press the button.

I'd like to try to fade in and out the image when I press the button, but it doesn't seem to connect well.I think I need an id, but how should I type it?

The following are the current conditions.
As I am a beginner, there are still many things I don't understand, but I appreciate your cooperation.

javascript jquery

2022-09-30 22:04

1 Answers

Prerequisite knowledge

id declares <button id="hoge">.
Multiple declarations cannot be made in the code, and jQuery uses # to express them, such as $("#hoge").
class declares <button class="fuga">.
Multiple declarations can be made in the code, and jQuery uses . to express them, such as $(".fuga").

Code Review

For line 9 $("#btn-space").click(function(){, there is no corresponding closure} for function){.
This will not work for the script.
In line 9, line 10, btn-space is not the button itself, but the div tag where the button is placed.
Pressing the button does not respond.
Line 11 #appear is not declared as id in html.
So I can't understand what fadeIn is for.
Line 6 base.css is not indicated in the question statement.
When you ask questions, paste them in text format.
In the eighth line, <head> describes click events, but does the sample of the textbook say so?
Isn't it written at the end of <body> as shown in the sample code below?

It's important to organize your knowledge of html and javascript and try to guess what's wrong with your code.
Based on the above, please read the text of the textbook again and calmly do your best.

sample code

This is a simple sample code example where clicking the fadeToggle button causes the image to fade in and out.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  and lt ; title and ; ; / and fade-in and fade-out gt ; and 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>

2022-09-30 22:04

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656