いくつかのオブジェクトのタイムアウトを設定しました

Question

複数のチラシをクリックすると、4秒後に表示されるヘルプテキストオーバーレイが表示されます。ヘルプテキストを表示することはできますが、タイムアウトは機能しません。

$(".flyercontainer").click(function(){ 
    $(this).children('.flyerHelp').css('opacity',0.8); 
    setTimeout(function(){ 
     $(this).children('.flyerHelp').css('opacity',0); 
    },4000); 
}) 

ご協力いただきありがとうございます。

Answer 1

setTimeOut()のコールバックのthisは、グローバルオブジェクトであるwindowを指しているとは限りません。 window.setTimeout()メソッドのコールバック関数の範囲で使用される場合

$(".flyercontainer").click(function(){ 
    var children = $(this).children('.flyerHelp'); 
    children.css('opacity',0.8); 
    setTimeout(function(){ 
     children.css('opacity',0); 
    },4000); 
}); 

Answer 2

上述したように、thisはwindowオブジェクトを指します。 .flyercontainerのclickハンドラーの範囲内で、setTimeout()の呼び出しの範囲外の変数をthisに設定すると、この問題を回避できます。

また、jQueryのdelay()メソッドを2つのゼロデュレーションアニメーションの間でチェーンして、オブジェクトの不透明度を変更しても同じ効果を得ることができます。 （デモ：http://jsfiddle.net/V2ZYy/）