jQuery - l'animation de la position «gauche» de la div positionnée de façon absolue lorsque le panneau coulissant est visible

Question

J'ai un panneau caché sur le côté gauche de l'écran qui se glisse dans le cliquetis d'une «languette» positionnée sur le côté gauche du écran. J'ai besoin que le panneau glisse au-dessus du contenu de la page existante, et j'ai besoin de l'onglet pour le déplacer. et donc les deux sont absolument positionnés en CSS. Tout fonctionne bien, à part que j'ai besoin de l'onglet (et donc de l'onglet-conteneur) pour aller à gauche avec le panneau quand il est révélé, donc il semble être coincé sur le côté droit du panneau. C'est relativement simple lors de l'utilisation des flotteurs, mais bien sûr cela affecte la mise en page du contenu existant, donc le positionnement absolu. J'ai essayé d'animer la position gauche du conteneur-panel (voir la fonction jquery documentée), mais je ne peux pas le faire fonctionner.

Ceci est un exemple du code original que j'ai changé, comment puis-je faire glisser le bouton/la languette?

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

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

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

    }); 

et c'est le 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; 
} 

Un grand merci

Answer 1

J'ai recommencé à zéro, et j'ai lu les documents jQuery hehe. J'ai mis le panneau et le bouton dans un div absolument positionné, en les faisant flotter tous les deux à gauche. Donne au conteneur une position gauche négative, puis place une action de bascule jQuery sur le bouton.

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

Je suis tombé sur ce post en essayant d'accomplir la même tâche.

Malheureusement, la réponse de Matt ne fonctionnera plus avec la dernière version de jQuery. Au moment où la réponse de Matt a été écrite, jQuery avait deux fonctions .toggle. Au moment où j'écris ceci, celui utilisé dans sa réponse a été déprécié. Si le code de Matt est utilisé, tout le div disparaîtra, bouton et tout. (Et si vous êtes comme moi, ce sera très confus jusqu'à ce que vous creusez dans la documentation api et découvrez le changement)

j'ai pu obtenir ma fonctionnalité travailler avec le code suivant:

HTML:

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

CSS (je sais que ce n'est pas encore très propre):

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

Et enfin le 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> 

J'espère que si vous êtes venus ici de Google, mon message sera utile :)