1

jQuery でリンクとして使用している div のリストがあります。いずれかをクリックすると、コンテンツ パネルがフェードインします。私が達成しようとしているのは、パネルを積み重ねて順番にフェードインとフェードアウトする原因となる各パネルをクリックし続けることができないようにすることです。現在のアクションが終了するまで、他のすべてのクリックが失敗するようにします。

HTML:

<div class="nav-row">
    <ul>
        <li><div class="btn-nav" pane="home">Home</div></li>
        <li><div class="btn-nav" pane="experience">Experience</div></li>
        <li><div class="btn-nav" pane="skills">Skills</div></li>
        <li><div class="btn-nav" pane="links">Links</div></li>
        <li><div class="btn-nav" pane="contact">Contact Me</div></div></li>
    </ul>
</div>

<div class="container home">
    Home
</div>
<div class="container experience">
    Experience
</div>
<div class="container skills">
    Skills
</div>
<div class="container links">
    Links
</div>
<div class="container contact">
    Contact
</div>

jQuery:

$(".btn-nav").click(function(){
    var pane = $(this).attr("pane");
    $(".container").fadeOut(600);
    $(".container."+pane).delay(605).fadeIn(600);
});
4

2 に答える 2

1

:animatedセレクターの実行時にアニメーションの進行中のすべての要素を選択する jQuery のセレクターを使用できます。これを使用すると、クリック ハンドラから戻ることができます。

これを試して。

$(".btn-nav").click(function(){
    if($(".container:animated").length > 0)
        return;

    var pane = $(this).attr("pane");
    $(".container").fadeOut(600);
    $(".container."+pane).delay(605).fadeIn(600);
});
于 2013-03-15T02:49:02.033 に答える
0

まず、前の要素のフェードアウトが完了した後に 1 つの要素をフェードインする場合は、 を使用するよりも、そのコードをコールバックに入れる方が適切delayです。実際の質問に関しては、単純な true/false ロックを使用して、コードが 2 回実行されるのを防ぐことをお勧めします。

var locked = false;
$(".btn-nav").click(function(){
    if ( locked )
        return;
    locked = true;
    var pane = $(this).attr("pane");
    $(".container").fadeOut(600, function() {
        // Will run after the fade out has completed
        $(".container."+pane).fadeIn(600, function() {
            // Will run after the fade in has completed
            locked = false;
        });
    });
});
于 2013-03-15T02:45:35.137 に答える