Jquery Show / Hide Alternar

Question

Eu estou tentando recriar o efeito mostrado na página inicial BBC, onde 'Adicionar mais para esta página' as ligações e 'set localização' slide abrir suas divs correspondente e mostrar seu conteúdo relevante. Se você selecionar 'adicionar mais para esta página' ele desliza abrir o 'adicionar mais' seção. Se você selecionar 'adicionar mais para esta página', novamente, em seguida, fecha a seção 'adicionar mais'. No entanto, se o 'adicionar mais' seção é aberta, e você selecionar 'location set' desliza seção 'adicionar mais' up antes de deslizar para baixo o 'local definido' selecionar.

Eu consegui recriar esse efeito usando o seguinte código:

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>                                                   

código 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;
        });
    });     
});

O problema é que, se alguém clicar vincular um, em seguida, ligar dois rapidamente ambos os divs são exibidos na página. Apenas uma seção deve ser mostrado em todos os momentos. Alguma idéia de como eu poderia corrigir esse problema?

Obrigado por sua ajuda.

Answer 1

uma demonstração rápida para você aqui . Basicamente, você pode testar se qualquer um dos divs estão actualmente a animação antes de prosseguir com o próximo slideDown usando o: selector animado.

Também tomamos nota da maneira que eu uso .Live. Isso é preferível do que colocar o mesmo manipulador de eventos para vários elementos.

NB Ignorar o salto texto como este é apenas até a falta de css

Answer 2

Você poderia eventos clique em Desativar quando você iniciar o deslizamento e reativá-lo ao deslizar está completa. Ainda mais fácil, você pode usar uma variável global como um "bloqueio". Defini-lo como falso ao deslizar começa, re set-lo como verdadeiro quando ela termina. Não permita que correr para qualquer div quando a variável é falsa. Você deve usar retornos de chamada para todas as animações.

Você pode usar algo como isto:

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

Todos os métodos de "Animação" (slideToggle, slideDown) aceitar a função de retorno como um argumento, que é chamado quando o efeito que eles executam é concluída.