jQuery - animazione della posizione "sinistra" del div in posizione assoluta quando viene rivelato il pannello scorrevole

Question

Ho un pannello nascosto sul lato sinistro dello schermo che scorre in vista al clic di una "scheda" posizionata sul lato sinistro del schermo. Ho bisogno che il pannello scivoli sulla parte superiore del contenuto della pagina esistente e ho bisogno che la scheda si sposti con esso. e quindi entrambi sono assolutamente posizionati in css. Tutto funziona bene, a parte il fatto che ho bisogno che la linguetta (e quindi il contenitore delle schede) si sposti a sinistra con il pannello quando viene rivelata, quindi sembra bloccata sul lato destro del pannello. È relativamente semplice quando si usano i float, ma ovviamente ciò influenza il layout del contenuto esistente, quindi il posizionamento assoluto. Ho provato ad animare la posizione sinistra del pannello-contenitore (vedi la funzione jquery documentata), ma non riesco a farlo funzionare.

Questo è un esempio del codice originale che ho modificato, come posso far scorrere il pulsante/scheda?

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

mio 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> 

mio 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 
    }); 
    }); 

    }); 

e questo è il 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; 
} 

Molte grazie

Answer 1

Ho ricominciato da zero e ho letto i documenti di jQuery hehe. Ho messo sia il pannello che il pulsante in un div in posizione assoluta, facendoli fluttuare entrambi a sinistra. Dare al contenitore una posizione sinistra negativa, quindi inserire un'azione javery sul pulsante.

$('#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

ci siamo imbattuti in questo post quando si cerca di eseguire la stessa operazione.

Purtroppo la risposta di Matt non funzionerà più con l'ultima versione di jQuery. Al momento della risposta di Matt, jQuery aveva due funzioni .toggle. Nel momento in cui sto scrivendo questo, quello utilizzato nella sua risposta è stato deprecato. Se viene usato il codice di Matt, l'intero div sparirà, il pulsante e tutto. (E se siete come me, che sarà molto confusa fino a quando si scava per la documentazione API e scoprire circa il cambiamento)

sono stato in grado di ottenere la mia funzionalità lavorare con il seguente codice:

HTML:

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

CSS (so che questo non è ancora molto pulito):

#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; 
} 

E infine il JavaScript:

Speriamo che se vieni da Google il mio post sarà utile :)