Mostra / nascondi Jquery Attiva / disattiva

Question

Sto cercando di ricreare l'effetto mostrato sulla homepage della BBC, dove i collegamenti 'aggiungi altro a questa pagina' e la diapositiva 'set location' aprono i loro div corrispondenti e mostrano il loro contenuto rilevante. Se selezioni "aggiungi altro a questa pagina", apre la sezione "aggiungi altro". Se selezioni di nuovo "aggiungi altro a questa pagina", la sezione "aggiungi altro" verrà chiusa. Tuttavia, se la sezione "aggiungi altro" è aperta e si seleziona "imposta posizione", fa scorrere verso l'alto la sezione "aggiungi altro" prima di scorrere verso il basso la selezione "imposta posizione".

Sono riuscito a ricreare questo effetto utilizzando il seguente codice:

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>                                                   

Codice Jquery

$(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;
        });
    });     
});

Il problema è che se qualcuno fa clic sul link uno, quindi collega due rapidamente entrambi i div vengono visualizzati sulla pagina. Solo una sezione deve essere mostrata in ogni momento. Qualche idea su come potrei risolvere questo problema?

Grazie per il tuo aiuto.

Answer 1

una rapida demo per te qui . Fondamentalmente puoi verificare se uno dei div è attualmente in fase di animazione prima di procedere con il prossimo slideDown usando il selettore animato.

Prendi anche nota del modo in cui utilizzo .live. È preferibile associare lo stesso gestore eventi a più elementi.

n.b Ignora il salto di testo poiché questo è dovuto alla mancanza di CSS

Answer 2

È possibile disabilitare gli eventi clic quando si avvia lo scorrimento e riattivarlo al termine dello scorrimento. Ancora più semplice, puoi utilizzare una variabile globale come " lock " ;. Impostalo su false quando inizia lo scorrimento, reimpostalo su true quando termina. Non consentire lo scorrimento per nessun div quando la variabile è falsa. È necessario utilizzare i callback per tutte le animazioni.

Puoi usare qualcosa del genere:

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

Tutto " animazione " i metodi (slideToggle, slideDown) accettano una funzione di callback come argomento, che viene chiamata al termine dell'effetto che eseguono.