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

尝试这样的事情：

$(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>

Answer 2

看起来你正在使用jQuery，所以你只需要：

1）创建一个隐藏类的函数。例如：

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

2）在图像文件中添加一个类，使它们有一个共同的选择器（如＆＃34; myimg＆＃34;下面）。您可能还想添加＆＃34; alt＆＃34;属性（代码中缺少）。例如：

<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>属性，也可以创建图像网址的数组并从中随机选择（这是我在此处所做的）。

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

如果我理解问题是正确的，在This Fiddle中，当您点击屏幕中的任意位置然后立即重新显示时，按钮元素会消失。希望这会奏效。

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

如何使元素显示然后在单击时消失

4 个答案: