JQuery Show / Hide Toggle

Question

Ich versuche, die Wirkung gezeigt auf der BBC-Homepage zu erstellen, wo die Links ‚mehr auf dieser Seite hinzufügen‘ und ‚set location‘ Folie öffnen ihre entsprechenden divs und deren relevante Inhalte zeigen. Wenn Sie ‚mehr auf dieser Seite hinzufügen‘ gleitet er offen, um den ‚mehr hinzufügen‘ Abschnitt. Wenn Sie ‚fügen Sie mehr zu dieser Seite‘ wieder schließt dann den ‚mehr hinzufügen‘ Abschnitt. Wenn jedoch die ‚hinzufügen mehr‘ Abschnitt offen ist, und wählen Sie ‚Set Position‘ gleitet die ‚hinzufügen mehr‘ Abschnitt, bevor die ‚Set Position‘ Abrutschen wählen.

Ich habe es geschafft, diesen Effekt mit dem folgenden Code zu erstellen:

HTML

    <ul id="demo">
        <li><a href="#sectionOne">Link One <span class="rm">this site</span></a></li>
        <li><a href="#sectionTwo">Link Two</a></li>
        <li><a href="#sectionThree">Link Three</a></li>                 
    </ul>

    <div id="siteCustomisation">
        <div class="siteSelection" id="sectionOne">
            <h3>Section One</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue tincidunt tortor, id condimentum massa scelerisque id. Cras elit magna, posuere at sollicitudin in, tristique nec turpis.</p>
        </div>
        <div class="siteSelection" id="sectionTwo">
            <h3>Section Two</h3>
            <p>Maecenas condimentum tincidunt pretium. Ut est ipsum, pharetra quis congue eu, eleifend vitae velit. Vestibulum quam purus, posuere quis vehicula ut, sollicitudin vel urna.</p>
        </div>
        <div class="siteSelection" id="sectionThree">
            <h3>Section Three</h3>
            <p>Nulla id nisi eget urna gravida euismod. Mauris tempor, diam ullamcorper sagittis eleifend, urna mauris scelerisque massa, placerat sagittis massa augue nec purus.</p>
        </div>                                  
    </div>                                                   

JQuery-Code

$(function(){
    $("#siteCustomisation .siteSelection").hide();

    $("#demo li a").each(function(index) {
        $(this).click(function() {  
            var id = $(this).attr('href');
            var $thisDiv = $(id);

            if ($thisDiv.siblings(':visible').length) { 
                $thisDiv.siblings(':visible').slideUp(700, function() {
                    $thisDiv.slideDown();
                });
            } else {    
                $thisDiv.slideToggle();         
            }
            return false;
        });
    });     
});

Das Problem ist, wenn jemand einen Link klickt, dann verknüpfen zwei schnell beide divs dann auf der Seite angezeigt werden. Nur ein Abschnitt sollte jederzeit angezeigt werden. Irgendwelche Ideen, wie ich könnte dieses Problem beheben?

Vielen Dank für Ihre Hilfe.

Answer 1

eine kurze Demo für Sie hier . Grundsätzlich können Sie testen, ob eine der divs derzeit Animieren, bevor sie mit der nächsten fortfahren slidedown die Verwendung: animierte Wähler.

Beachten Sie auch die Art, wie ich .live verwenden. Dies ist bevorzugt, als die gleichen Event-Handler, um mehrere Elemente zu befestigen.

N. B Ignorieren Sie den Text springen, da dies nur auf den Mangel an CSS ist

Answer 2

Sie können Klick-Ereignisse deaktivieren, wenn Sie die Schiebe- und es wieder aktivieren starten, wenn abgeschlossen schieben. Noch einfacher können Sie eine globale Variable als „Lock“ verwenden. Setzen Sie ihn auf false, wenn beginnt Schiebe-, neu eingestellt es wahr, wenn es endet. Lassen Sie nicht für div Gleiten, wenn die Variable falsch ist. Sie müssen Rückrufe für alle Animationen verwenden.

Sie können so etwas wie folgt verwenden:

animationStarted = true;
$thisDiv.slideToggle(function() {   
   animationStarted = false; 
});

All „Animation“ Methoden (slideToggle, slidedown) akzeptieren eine Callback-Funktion als Argument, die aufgerufen wird, wenn die Wirkung, die sie durchführen abgeschlossen ist.