javascript - jQuery でのイベント ハンドラーでのアクションの組み合わせ

Question

div以下は、クリック イベントで要素を非表示にする jQuery ステートメントです。5 秒後にクリックされなくても、要素をフェードアウトさせたいと思います。fadeOut同じ式で、またはclickイベントがアニメーションに干渉することなく関数を呼び出す簡単な方法はありますか?

$(".fadeOutbox").click(function(){
    $(this).fadeOut('slow');
});

Answer 1

ほとんどの jQuery コンポーネントは連鎖可能であり、そのままの関数は初期オブジェクトへの参照を返します。

以下を使用するだけで、目的を達成できます。

$(".fadeOutbox").click(function () {
    $(this).stop().fadeOut('slow');
}).delay(5000).fadeOut('slow');

基本的に onclick として読み取り、フェードアウトします。それ以外の場合は 5 秒後にフェードアウトします。

Answer 2

これを試して：

var wasClicked = false;
$(".fadeOutbox").click(function () { wasClicked = true; });

setTimeout(function () {
   if(wasClicked = false)
       $(".fadeOutbox").fadeOut('slow');
}, 5000);

Answer 3

タイムアウトの変数を保持し、ユーザーがクリックするたびにクリアしてみてください。

実施例

// Timeout variable
var t;

$('.fadeOutBox').click(function()
{
    $box = $(this);
    $box.fadeIn("fast");

    // Reset the timeout
    clearTimeout(t);
    t = setTimeout(function()
    {
        $box.fadeOut("slow");
    }, 5000);
});

これがお役に立てば幸いです。

Answer 4

明確にするために編集します。

var clear = setTimeout(function(){ $(".fadeOutbox").fadeOut('slow'); }, 5000);

$(".fadeOutbox").on('click', function(){
  clearTimeout(clear);
});

デモ: http://jsfiddle.net/mGbHq/

Answer 5

クリック ハンドラー内ではないタイムアウトを使用します。

setTimeout(function () {
   $(".fadeOutbox").fadeOut('slow');
}, 5000);

jQuery コードは次のようになります。

// set a timeout for 5 seconds
setTimeout(function () {
    $(".fadeOutbox").fadeOut('slow');
}, 5000);

// attach click handler
$(".fadeOutbox").on("click", function () {
    $(this).fadeOut('slow');
});

JSFIDDLE

Answer 6

試す

$('#div').delay(5000).fadeOut(400)

デモ