Jquery Mostrar / Ocultar alternar

Question

Estoy tratando de recrear el efecto que se muestra en la página de inicio de la BBC donde los enlaces 'agregar más a esta página' y 'establecer ubicación' deslizan para abrir sus divisiones correspondientes y mostrar su contenido relevante. Si selecciona 'agregar más a esta página', las diapositivas abren la sección 'agregar más'. Si selecciona 'agregar más a esta página' nuevamente, cierra la sección 'agregar más'. Sin embargo, si la sección 'agregar más' está abierta y selecciona 'establecer ubicación', desliza la sección 'agregar más' hacia arriba antes de deslizar hacia abajo la selección 'establecer ubicación'.

He logrado recrear este efecto usando el siguiente 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;
        });
    });     
});

El problema es que si alguien hace clic en el enlace uno, luego en el enlace dos rápidamente, ambos divs se muestran en la página. Solo se debe mostrar una sección en todo momento. ¿Alguna idea de cómo podría solucionar este problema?

Gracias por su ayuda.

Answer 1

una demostración rápida para usted aquí . Básicamente, puede probar si alguno de los divs se está animando actualmente antes de continuar con la siguiente diapositiva hacia abajo utilizando el selector animado.

También tome nota de la forma en que uso .live. Esto es preferible que adjuntar el mismo controlador de eventos a varios elementos.

n.b Ignorar el salto de texto ya que esto se debe a la falta de CSS

Answer 2

Puede deshabilitar los eventos de clic cuando inicia el deslizamiento y volver a habilitarlo cuando se completa el deslizamiento. Aún más fácil, puede usar una variable global como un "bloqueo". Póngalo en falso cuando comience el deslizamiento, vuelva a ponerlo en verdadero cuando termine. No permita el deslizamiento de ningún div cuando la variable sea falsa. Debe usar devoluciones de llamada para todas las animaciones.

Puedes usar algo como esto:

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

Todos " animación " Los métodos (slideToggle, slideDown) aceptan una función de devolución de llamada como argumento, que se llama cuando se completa el efecto que realizan.