jqueryを使用して複数の画像をフェードアウトするにはどうすればよいですか？

Question

画像をクリックしてから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> 

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

フェードアウトは、それが近い将来に拡張することができるように、画像のための一般的なクラスを使用

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

を使用し、ない3秒後、3秒で画像をフェードインします。コールバックフェードイメージで