просто исчезать в JQuery

Question

Я пытаюсь сделать простой fadeIn fadeOut с помощью jQuery, но, похоже, он не работает ..

$("h1").append("<p>This is new.</p>");

// With the element initially hidden, we can show it slowly:
$("#clickme").click(function() {
  $("#square").fadeIn("slow", function() {
    // Animation complete
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="clickme">
  Click me
</div>
<img id="square" src="https://cdn.glitch.com/4963558f-bbaf-419b-9695-abdd14691841%2Fsquare.png?1544000277571" alt="" width="100" height="123">

Я получил это от http://api.jquery.com/fadein/ (я заменил изображение книги на изображение квадратной формы, потому что у меня нет изображения книги)

Я запускаю JavaScript и HTML, и я не совсем понимаю ответы на другие вопросы о fadeIn jQuery, поэтому я задаю свой собственный вопрос.

Answer 1

Вы должны начать с display:none для #square, тогда вы можете fadeIn

$("h1").append("<p>This is new.</p>");
    
// With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#square" ).fadeIn( "slow", function() {
    // Animation complete
  });
});

#square {display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="clickme">
  Click me
</div>
<img id="square" src="https://cdn.glitch.com/4963558f-bbaf-419b-9695-abdd14691841%2Fsquare.png?1544000277571" alt="" width="100" height="123">

Answer 2

Вы исчезаете, единственный элемент невидим.Посмотрите на скрипт ниже

$("h1").append("<p>This is new.</p>");

// With the element initially hidden, we can show it slowly:
$("#clickme").click(function() {
  $element = $("#square");
  if ($element.is(':visible')) {
    // Hide if already visible.
    $element.fadeOut("slow", function() {});
  } else {
    // Show if not yet visible.
    $element.fadeIn("slow", function() {});
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="clickme">
  Click me
</div>
<div id="square">
  <img src="https://cdn.glitch.com/4963558f-bbaf-419b-9695-abdd14691841%2Fsquare.png?1544000277571" alt="" width="100" height="123">
</div>

Answer 3

Как вы можете fadeIn, если квадрат уже исчез?

Используйте FadeIn, когда квадрат невидим, и FadeOut, когда квадрат видим.

В этом примере, квадрат равен display:none, а когда "щелкнитея " квадрат исчезает .

$("h1").append("<p>This is new.</p>");

// With the element initially hidden, we can show it slowly:
$("#clickme").click(function() {
  $("#square").fadeIn("slow", function() {
    // Animation complete
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="clickme">
  Click me
</div>
<img id="square" style="display:none" src="https://cdn.glitch.com/4963558f-bbaf-419b-9695-abdd14691841%2Fsquare.png?1544000277571" alt="" width="100" height="123">