【jQuery】遅れてfade in/outさせる

【要件】
ボタンをクリックしたら500ms遅れて何か要素(今日はクリックされたボタン)を$.fadeOut()させよ

はい。普通にjQueryで書くとこんな感じ。

$('ぼたん').click(function() {
  setTimeout(function() {
    $(this).fadeOut();
  }.bind(this), 500);
});

そうです。遅れて何かをするときには setTimeout() です。これでOKです。
でも、もう一個function() が出てくるので this を bind しなきゃいけないし(functionの外側で var self = this; とかして、 $(self).fadeOut() しても同じです。)、なかなか煩わしいですよね。

そこで、せっかくjQueryなので .delay() を使うと楽だよ、可読性も上がるよ、という紹介です。
まあ、こんな書き方もあるんだよ、程度に。よかったら使ってみてくださいね。

$('ぼたん').click(function() {
    $(this).delay(500).fadeOut();
});

これで同じ動作をします。
ほら、読みやすくなったでしょう？
実物は下記をご覧ください！

See the Pen kkgwBL by Takaki Hiemno (@takaki1216) on CodePen.