Tengo un problema con una alternancia de la barra lateral usando jQuery

Question

Estoy tratando de crear una simple alternancia de la barra lateral utilizando jquery, donde se expande y se contrae cuando se pulsa un botón.Además, el botón cambia a otro tipo de botón al ser pulsado.La barra lateral se expanda, pero por alguna razón, no se mueve de nuevo a su posición original.Usted puede ver una copia de javascript y html en http://www.jqueryhelp.com/viewtopic.php?p=4241#4241

Aquí está el código de trabajo, gracias Bendeway!:D

$(".btn-slide").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "show", left: 250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

$(".active").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: 100}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
});

Answer 1

en lugar de tratar el uso correcto izquierda con un número negativo. Además yo recomendaría usar preventDefault en lugar de devolver falso.

$(".active").click(function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
   $(this).toggleClass("btn-slide");
}); 

Actualizar

Otra pieza que acabo de notar es que su adjuntando un evento de clic al botón .active, cuando el documento está listo, pero no hay ningún botón .active cuando el documento esté listo lo que viene después de que se cambie. Hay un par de opciones aquí.

En primer lugar es el uso de la nueva vivir función de jQuery 1.3

$(".btn-slide").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: 250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

$(".active").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

La otra opción sería la de haber establecido el evento click en un modificador diferente (por ejemplo. En el ello, tal vez).

<span>News  <img src="img/overlay.png" id="sliderButton" class="btn-slide" alt="" /></span>     

a continuación, usar esto para manejar el clic

$("#sliderButton").click(function(e){ 
  e.preventDefault();

  $(this).is('.btn-slide').each(function() {
   $("#sidebar").animate({opacity: "show", left: 250}, "slow"); 
  });

  $(this).is('.active').each(function() {
   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
  });
  $(this).toggleClass("active").toggleClass('btn-slide');  
}); 

o incluso más concisa

$("#sliderButton").click(function(e){ 
  e.preventDefault();

  var animationSettings = {opacity: "show", left: 250};
  if ($(this).hasClass('active') )
  {
    animationSettings = {opacity: "hide", left: -250};
  } 

  $("#sidebar").animate(animationSettings , "slow"); 
  $(this).toggleClass("active").toggleClass('btn-slide');  
}); 

La última opción que se me ocurre sería establecer los eventos de clic después de que se cambien, pero yo no haría eso por lo que no voy a suministrar una muestra.

Por último, me gustaría poner en alerta a su devolución de llamada activa y asegurarse de que su evento de botón activa está disparando.

Answer 2

La forma en que su lógica está escrito, creo que hay que hacer un 'toggleClass' en ambas clases dentro de sus controladores de clic que se sumarán uno y quita la otra. Por ejemplo, cuando se hace clic en su artículo "activa" que alternar (ADD) la clase BTN-deslizante, pero esto va a salir de la clase "activa" en su lugar también.

Por supuesto, en lugar de utilizar "toggleClass" también se podría utilizar "addClass" y "removeClass" a ser más explícita.

recomiendo el uso de una herramienta como Firebug para ver lo que está sucediendo dentro de su DOM.

$(document).ready(function(){

   $(".btn-slide").click(function(){
   $("#sidebar").animate({opacity: "show", left: "250"}, "slow");
   $(this).toggleClass("active");  // add class
   $(this).toggleClass("btn-slide"); // remove class
   return false;
   });   

});

$(document).ready(function(){

   $(".active").click(function(){
   $("#sidebar").animate({opacity: "hide", right: "250"}, "slow");
   $(this).toggleClass("active");  // remove class
   $(this).toggleClass("btn-slide");  // add class
   return false;
   });
}); 

Answer 3

Esto funciona.

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#sidebar").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});

Answer 4

El HTML

<div id="content">
 <a href="#" id="ec">Expand / Contract</a>
 <div id="main">
   Watch Me Shrink Or Grow
 </div>
</div>

El Jquery

$(function() {
 var ecswitch = 1;
 /* prevent the annoying scroll back up thing */
 $("#ec").click(function(e) {
   e.preventDefault();
   var x = $("#main").width(); // get element width
   var y = $("#main").height(); // get element height 
   if(ecswitch == 1) {
    $("#main").animate({opacity:0, hieght:"0", width:"0"}, 1300);
    ecswitch = 0;
   } else {
     $("#main").animate({opacity:1, hieght:y, width:x}, 1300);
    ecswitch = 1;
   }
 });
});

El CSS

#main { height:200px; }

Explicación

OK me eligió para hacer esto de manera un poco diferente.esto inicializa con la altura de nuestro experimento 200px y el ancho es automática.Cuando usted haga clic en el hipervínculo, el experimento se oculta en 1.3 segundos y un interruptor está ajustado a 0.cuando usted haga clic de nuevo se vuelve por un período de 1.3 segundos y el interruptor se pone a 1.como un interruptor de luz.He utilizado el anime aquí porque un simple fundido u ocultar me tiene aburrido...

La razón por la que me dieron el ancho y alto del elemento antes de cero-ing ellos se si dijo width:100%" y la altura:"100%" en mi animar sería establecer que el 100% de las páginas de la anchura y la altura...no queremos eso.

NOTA :Yo también estoy usando la opacidad en un período de tiempo.bastante bien para la decoloración así :)