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

Question

我想在点击图像后以3秒的延迟淡出这3张图像。 我目前编写的代码无法正常工作。 有人可以解释为什么吗？ 谢谢！ 我以为“这”是指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秒钟，您会根据需要淡入图像。

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