¿Cómo elimino esta clase después de que la diapositiva de jquery esté en la posición hacia arriba?

Question

Actualmente tengo el siguiente código configurado para una diapositiva jQuery.

$(document).ready(function() { 
    $('a#slide-up').click(function() { 
     $('.slide-container').slideUp(); 
     return false; 
    }); 
    $('a#slide-toggle').click(function() { 
     if ($('.slide-container').is(':visible')) { 
      $('.slide-container').slideUp(); 
      $(this).removeClass('active'); 
     } else { 
      $('.slide-container').slideDown(); 
      $(this).addClass('active'); 
     } 
    }); 
}); 

Y el html:

<a id="slide-toggle"></a> 

<div class="slide-container"> 
    <a id="slide-up"></a> 
    >>content<< 
</div> 

Cuando hago clic en # deslizable de palanca, la clase 'activa' se aplica en ella y div.slide-contenedor se desliza hacia abajo revelando el contenido y otro enlace para deslizar el contenedor hacia arriba (es decir, un # deslizante hacia arriba). Cuando hago clic en una # deslizadera hacia arriba, el contenedor se desliza hacia atrás pero una barra deslizadora # permanece "activa" con la clase aplicada.

Lo quiero para que cuando haga clic en un # deslizante, la clase 'activa' se elimine. ¿Cómo puedo hacer esto?

operación -Editar-

$(document).ready(function() { 
    $('a#slide-up').click(function() { 
     $('.slide-container').slideUp(function(){ 
      $('#slide-toggle').removeClass('active'); 
     }); 
     return false; 
    }); 

    $('a#slide-toggle').click(function() { 
     if ($('.slide-container').is(':visible')) { 
      $('.slide-container').slideUp(function() { 
      $(this).removeClass('active'); 
      } 
     }) 
     else { 
      $('.slide-container').slideDown(); 
      $(this).addClass('active'); 
     } 
    }); 
}); 

Answer 1

Basta con retirar la clase en el controlador para el botón #slide-up:

$('a#slide-up').click(function() { 
    $('.slide-container').slideUp(); 
    $('#slide-toggle').removeClass('active'); 
    return false; 
}); 

o si desea que se espera hasta que se complete la animación, hazlo en una devolución de llamada:

$('a#slide-up').click(function() { 
    $('.slide-container').slideUp(function(){ 
     $('#slide-toggle').removeClass('active'); 
    }); 
    return false; 
}); 

---

En cuanto a su comentario:

$('a#slide-toggle').click(function() { 
     // keep a reference to the slide-toggle element 
    var slideToggle = this; 
    if ($('.slide-container').is(':visible')) { 
     $('.slide-container').slideUp(function() { 
      $(slideToggle).removeClass('active'); // remove class from slide-toggle 
     }); // <-- moved the closing) to here 
    }  // <-- instead of here 
    else { 
     $('.slide-container').slideDown(); 
     $(slideToggle).addClass('active'); // add class to slide-toggle 
    } 
}); 

Answer 2

sólo tiene que añadir:

$(document).ready(function() { 
    $('a#slide-up').click(function() { 
     $('.slide-container').slideUp(); return false;}); 
    $('a#slide-toggle').click(function() { 

     // removing active class for active element 
     $('a.active').removeClass('active'); 

     if ($('.slide-container').is(':visible')) { 
      $('.slide-container').slideUp(); 
     } 
     else { 
      $('.slide-container').slideDown(); 
      $(this).addClass('active'); 
     } 
    }); 
});