Как заставить элемент появляться, а затем исчезать при клике

Question

Я пытался сделать случайное изображение появляющимся при клике, добавив эффект fadeOut и затем удалив класс. когда я нажимаю, он работает нормально, но я не знаю, как удалить класс через несколько миллисекунд, а затем снова появиться при следующем щелчке. до сих пор я только мог заставить его исчезать при щелчке, я пробовал функцию setInterval, чтобы класс удалялся через 1 миллисекунду, но не работал, поэтому я стер ее, но даже тогда я не знаю, как заставить функцию .on ('click', function ()) срабатывать при каждом щелчке, вместо того, чтобы просто работать один раз. любая помощь или советы будут очень признательны. Спасибо!

<style>
body {
  background-color: black;
}

img {
  opacity: 0;
  width: 40px;
  z-index: 0;
  position: relative;
  top: 3em;
}

</style>    

<img class="red" 
src="http://www.clker.com/cliparts/0/f/1/f/130267960774173786paint- 
splash(red)-md.png" alt="">

<img class="blue" src="http://www.clker.com/cliparts/Q/3/H/u/Z/K/dark-blue- 
splash-ink-hi.png" alt="">

<img class="yellow" src="http://www.clker.com/cliparts/3/y/m/m/p/P/yellow- 
splash-ink-md.png" alt="">

<script>
$(document).ready(function(){
 var red = $(".red");
 var blue = $(".blue");
 var yellow = $(".yellow");
 var images = [red, blue, yellow];

 $(document).on('click', function(){
 $(images[(Math.floor(Math.random()*3))]).addClass("animated fadeOut");
 });
})
//i should be able to click anywhere on the screen and a random image should appear and then fadeout each time there is a click
</script>

Answer 1

Если я правильно понял вопрос, в This Fiddle элемент кнопки исчезает, когда вы нажимаете в любом месте экрана, а затем немедленно появляется re. Надеюсь, это сработает.

    $(document).ready(function(){
       $(document).on('click',function(){
         $("#myElement").fadeOut().delay(100).fadeIn();
       });
   });

Answer 2

Похоже, вы используете jQuery, поэтому вам просто нужно:

1) Создайте функцию, которая скрывает класс. Пример:

function hideStuff(){
  $(".myimg").hide();
}

2) Добавьте класс к своим файлам изображений, чтобы они имели общий селектор (например, «myimg» ниже). Вы также можете добавить атрибут «alt» (отсутствовал в вашем коде). Пример:

<img class="yellow myimg" src="http://www.clker.com/stuff" alt="image-three">

3) Добавьте время ожидания как часть вашей функции с необходимой вам задержкой. Хотя это и не обязательно, вы должны включить имя переменной, чтобы вы могли вызывать ее в будущем. Пример:

var myTimeout = setTimeout( hideStuff, 5000);

Надеюсь, они приведут вас в правильном направлении.

Answer 3

Оба .fadeOut() и .hide() устанавливают display: none, что может повлиять на ваш макет. Я думаю, что вы хотите анимировать непрозрачность до 0, а затем в функции обратного вызова вы можете изменить источник изображения. Я бы порекомендовал использовать div и установить свойство background-image, так как div'ы немного более удобны для макета. Кроме того, вы можете либо использовать классы и установить свойство background-image в разделе <style>, либо вы можете создать массив URL-адресов изображений и выбрать их случайным образом (что я и сделал здесь).

let images = [
'http://www.clker.com/cliparts/0/f/1/f/130267960774173786paint-splash(red)-md.png',
'http://www.clker.com/cliparts/Q/3/H/u/Z/K/dark-blue-splash-ink-hi.png',
'http://www.clker.com/cliparts/3/y/m/m/p/P/yellow-splash-ink-md.png'
];

$(document).on('click', function() {
  let $img = $('.img'); //so you don't have to make a new object everytime it's used

  if ($img.css('opacity') === '1') {
    $img.animate({ opacity: 0 }, function() { 
      $img.css('background-image', `url(${images[Math.floor(Math.random()*3)]})`); 
    });    
  } else {
    $img.animate({ opacity: 1 });
  }
}).click().click(); //two clicks to initialize image

https://jsfiddle.net/yc4e4nxb/3/

ПРИМЕЧАНИЕ. JSfiddle, похоже, не нравится, где размещаются эти изображения, поэтому он работает хаотично. Надеюсь, вы понимаете, что делает этот код.

http://api.jquery.com/animate/

Answer 4

Попробуйте что-то вроде этого:

$(document).on("click", function() {
  $("#element").show(0, function() {
    $("#element").fadeOut();
  });
});
$("#element").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="element">Element</span>