如何使用jquery淡出多个图像

How do I fade out multiple images using jquery?

本文关键字：图像 淡出 何使用 jquery      更新时间：2023-09-26

我想在点击后以3秒的延迟淡出这3张图像。我目前编写的代码不起作用。有人能解释一下原因吗？非常感谢。我以为"this"指的是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>

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

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

对图像使用公共类，以便在不久的将来可以扩展。在回叫淡入淡出图像中。

尝试此https://jsfiddle.net/pvfbsq3q/2/

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

关注这个片段。这是延迟淡入图像的最简单方法。它会根据您的要求在点击事件后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>

相关文章：