0

私はjsの初心者で、初心者の問題に苦しんでいます。

私がしたいのは次のとおりです。li-Element on.clickでfadeInし、5秒後、もう一度fadeOutします。要素が 5 秒以内に 2 回以上クリックされた場合、new からの fadeOut の 5 秒のカウントを開始します。

私は基本をまとめており、理論的には次のようになります。

$("#boxes li").on("click",function() {
    $(this).find(".front,.back").fadeToggle(800).delay(5000).fadeToggle(800);
});

ただし、適切にフェードアウトするために、5秒以内にli-Elementを再度クリックすると、新しいものからの遅延のカウントを開始する必要がsetTimeoutあります。clearTimeout

その周りの理論は知っていますが、その背後にあるコードを理解していないようです。

提案していただきありがとうございます。スムーズに説明しようとするときは、私が初心者であることを覚えておいてください。

編集

ピートのアイデアによると、私が達成したいことにもっと似たフィドルを作成しました。何らかの理由で、fadeToggle ではうまく機能しません。フィドルとして更新された例を次に示します。

http://jsfiddle.net/sfiddle/jLurZ/

if ステートメントで実現したい機能は言うまでもなく、クリックされた div は元に戻りません。

よろしくお願いします、

4

2 に答える 2

1

あなたはこのようなことを試すことができます：

$("#boxes li").on("click",function({    
    $('.front,.back').stop().hide().fadeToggle(800, function() {
        $(this).delay(1500).fadeToggle(800);
    });
});

http://jsfiddle.net/gZ3TS/1/

編集

2回クリックした場合にリセットするjQueryの回避策：http：//jsfiddle.net/gZ3TS/6/

setTimeoutおよびを使用する：http clearTimeout：//jsfiddle.net/gZ3TS/11/

アップデート

複数のフェードボックス-残念ながらfadeToggle、アニメーションシーケンスの途中でユーザーがクリックした場合、ボックスを特定の状態に保つ必要があるため、使用できません。

http://jsfiddle.net/gZ3TS/31/

于 2013-03-19T15:05:08.580 に答える
0

これはうまくいくはずです：

var fadeoutnow;
$("#boxes li").on("click",function({

    $(this).find(".front, .back").fadeToggle(800);

    clearTimeout(fadeoutnow);

    //You can assign the timeout function to a variable so that you can clear it (above)
    fadeoutnow = setTimeout(function(){
        $(this).find(".front, .back").fadeToggle(800);
    }, 5000);

});
于 2013-03-19T15:03:46.600 に答える