Question

点击图片后，我想点击这3张图片，延迟3秒。我目前编写的代码不起作用。有人可以解释原因吗？谢谢！我想过这个＆＃39;会引用3个id标签。

另外，如果有更简单的方法，请分享。

<script>

$(function(){
  ('#img1, #img2, #img3').click(function() {
    $(this).fadeOut(3000);
  });
});
</script>


<div class="flex-container">
 <img id="img1" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2015/09/google_logo.jpg">
 <img id="img2" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2015/09/google_logo.jpg">
 <img id="img3" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2015/09/google_logo.jpg">
</div>

</body>
</html>

Answer 1

fadeOut将在3秒内淡化图像，而不是3秒后，使用

$('.image').click(function() {
    setTimeout(function(){ 
        $(this).fadeOut(3000);
    }, 3000);
});

使用图像的公共类，以便它可以在不久的将来扩展。在回调淡化图像。

Answer 2

试试这个https://jsfiddle.net/pvfbsq3q/2/

$(document).ready(function() {  
   $(function(){
  $('#img1,#img2,#img3').click(function() {
    $('#img1,#img2,#img3').fadeOut(3000);
  });
});});

Answer 3

关注此片段。这是延迟淡化图像的最简单方法。根据您的要求，它会在点击事件发生3秒后淡出图像。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="flex-container">
 <img id="img1" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2015/09/google_logo.jpg">
 <img id="img2" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2015/09/google_logo.jpg">
 <img id="img3" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2015/09/google_logo.jpg">
</div>

<script>
$(document).ready(function(){
var selector = '#img1,#img2,#img3';
    $(selector).click(function(){
      
        $(selector).delay(3000).fadeOut(1000);

    });
  
});
  

</script>

＆＃13;

如何使用jquery淡出多个图像？

3 个答案: