jQuery - animación de la posición "izquierda" de div en posición absoluta cuando se muestra el panel deslizante

Question

Tengo un panel oculto en el lado izquierdo de la pantalla que se desliza a la vista al hacer clic en una "pestaña" situada en el lado izquierdo del pantalla. Necesito que el panel se deslice sobre el contenido de la página existente y necesito que la pestaña se mueva con él. y entonces ambos están absolutamente posicionados en CSS. Todo funciona bien, aparte de que necesito la pestaña (y por lo tanto el contenedor de pestañas) para mover hacia la izquierda con el panel cuando se revela, por lo que parece estar pegado al lado derecho del panel. Es relativamente simple cuando se usan flotadores, pero, por supuesto, esto afecta el diseño del contenido existente, por lo tanto, el posicionamiento absoluto. Intenté animar la posición izquierda del panel-contenedor (ver la función jquery documentada), pero no puedo hacer que funcione.

Este es un ejemplo del código original que he cambiado, ¿cómo puedo hacer que el botón/pestaña también se deslice?

http://www.iamkreative.co.uk/jquery/slideout_div.html

Mi HTML

<div><!--sample page content--> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
    </p> 
</div> 

<div id="panel" class="height"> <!--the hidden panel --> 
    <div class="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> 
    </div> 
</div> 

<!--if javascript is disabled use this link--> 
<div id="tab-container" class="height"> 
    <a href="#" onclick="return()"> 
     <div id="tab"><!-- this will activate the panel. --></div> 
    </a> 
</div> 

Mi jQuery

$(document).ready(function(){ 

$("#panel, .content").hide(); //hides the panel and content from the user 

$('#tab').toggle(function(){ //adding a toggle function to the #tab 
    $('#panel').stop().animate({width:"400px", opacity:0.8}, 100, //sliding the #panel to 400px 

    // THIS NEXT FUNCTION DOES NOT WORK --> 
    function() { 
     $('#tab-container').animate({left:"400px"} //400px to match the panel width 
     }); 

    function() { 
     $('.content').fadeIn('slow'); //slides the content into view. 
     }); 
}, 

function(){ //when the #tab is next cliked 
    $('.content').fadeOut('slow', function() { //fade out the content 
     $('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0 
    }); 
    }); 

    }); 

y este es el css

#panel { 
position:absolute; 
left:0px; 
top:50px; 
background-color:#999999; 
height:500px; 
display:none;/*hide the panel if Javascript is not running*/ 
} 

#panel .content { 
width:290px; 
margin-left:30px; 
} 

#tab-container{ 
position:absolute; 
top:20px; 
width:50px; 
height:620px; 
background:#161616; 
} 

#tab { 
width:50px; 
height:150px; 
margin-top:100px; 
display:block; 
cursor:pointer; 
background:#DDD; 
} 

Muchas gracias

Answer 1

Empecé de nuevo desde cero, y de hecho leí los documentos jQuery jeje. Puse tanto el panel como el botón en un div completamente posicionado, y los dejé a la izquierda. Dio al contenedor una posición negativa a la izquierda, luego puso una acción de alternar jQuery en el botón.

$('#button').toggle(function() { 

    $('#slider').animate({ 
     left: '+=200' 
     }, 458, 'swing', function() { 

     // Animation complete. CALLBACK? 

    }); 

}, function() { 

    $('#slider').animate({ 
     left: '-=200' 
     }, 458, 'swing', function() { 

     // Animation complete. CALLBACK? 

    }); 

}); 

Answer 2

Me tropecé con esta publicación cuando intentaba llevar a cabo la misma tarea.

Desafortunadamente, la respuesta de Matt ya no funcionará con la última versión de jQuery. En el momento en que se escribió la respuesta de Matt, jQuery tenía dos funciones de activación. En el momento en que escribo esto, el que se utilizó en su respuesta ha sido desaprobado. Si se usa el código de Matt, desaparecerá todo el div, el botón y todo. (Y si usted es como yo que va a ser muy confuso hasta que cavar en la documentación API y obtener información sobre el cambio)

pude conseguir mi funcionalidad trabajar con el siguiente código:

HTML:

<div id="siteMap"> 
<div id="mapButton">Site Map</div> 
<div id="theMap">[The Site Map Goes Here]</div> 
</div> 

CSS (sé que esto aún no es muy limpio):

#siteMap { 
    width:500px; 
    position:fixed; 
    left:-500px; 
    top:157px; 
    display:block; 
    color:#FFF; 
    z-index:2; 
    opacity: 0.95; 
} 
#siteMap #mapButton { 
    display:block; 
    color:#333; 
    background-color:#ACACAC; 
    padding:2px 5px; 
    height:20px; 
    width:70px; 
    text-align:center; 
    position:relative; 
    left: 100%; 
    margin-top:80px; 
    cursor:pointer; 

    transform-origin:  0% 0%; 
    -ms-transform-origin:  0% 0%; 
    -webkit-transform-origin: 0% 0%; 
    -moz-transform-origin:  0% 0%; 
    -o-transform-origin:  0% 0%; 

    transform:   rotate(-90deg); 
    -ms-transform:  rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform:  rotate(-90deg); 
} 
#siteMap #theMap { 
    width:100%; 
    height:350px; 
    background-color:#666; 
    margin-top:-104px; 
} 

Y, por último, el código JavaScript:

<script type='text/javascript'> 
    $(document).ready(function() { 
    $('#mapButton').click(function() { 
     var mapPos = parseInt($('#siteMap').css('left'), 10); 
     if (mapPos < 0) { 
     $('#siteMap').animate({ 
      left: '+=500' 
      }, 458, 'swing', function() { 
      // Animation complete. 
      }); 
     } 
     else { 
     $('#siteMap').animate({ 
      left: '-=500' 
      }, 458, 'swing', function() { 
      // Animation complete. 
     }); 
     } 
    }); 
    }); 
</script> 

Esperemos que si ha venido desde Google, mi publicación será útil :)