Как я могу уменьшить количество изображений с помощью jquery?

Question

Я хотел бы осветлить эти 3 изображения при щелчке с задержкой 3 секунды после щелчка по изображению. Код, который я написал в настоящее время, не работает. Может кто-нибудь объяснить, почему? Спасибо! Я думал, что «это» будет ссылаться на теги с тремя идентификаторами.

Кроме того, если есть более простой способ, пожалуйста, поделитесь.

<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

попробовать это https://jsfiddle.net/pvfbsq3q/2/

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

Answer 2

Следуйте этому snippet.This это самый простой способ исчезать изображение с задержкой. Он затухает изображения через 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>

Answer 3

FADEOUT будет исчезать изображения в 3-х секунд, а не через 3 секунды, используйте

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

использовать общий класс для изображений, так что он может быть расширяемой в ближайшем будущем. в обратном направлении затухают изображения.