jQuery - animacja "lewej" pozycji absolutnie ustawionego dziobu, gdy panel przesuwny jest odsłonięty

Question

Mam ukryty panel z lewej strony ekranu, który przesuwa się do widoku po kliknięciu "tabulatora" umieszczonego po lewej stronie ekran. Potrzebuję panelu do przesuwania się nad istniejącą zawartością strony i potrzebuję tej karty, aby się z nią przesuwać. i dlatego oba są absolutnie umieszczone w css. Wszystko działa dobrze, oprócz tego, że po odsłonięciu karty (a więc i pojemnika z zakładkami) muszę przesunąć się w lewo, tak że wydaje się, że przylega do prawej strony panelu. Jest stosunkowo prosty, gdy używa się pływaków, ale oczywiście wpływa to na układ istniejącej treści, a więc na pozycjonowanie absolutne. Próbowałem animować lewą pozycję panelu-kontenera (zobacz udokumentowaną funkcję jquery), ale nie mogę go uruchomić.

To jest przykład oryginalnego kodu, który zmieniłem, w jaki sposób mogę również przesunąć przycisk/kartę?

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

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

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

    }); 

i to jest 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; 
} 

Dziękujemy

Answer 1

Zacząłem ponownie od zera i faktycznie czytałem dokumenty jQuery hehe. Położyłem panel i przycisk w absolutnie ustawionym dziale, unosząc je po lewej. Dałem pojemnikowi ujemną lewą pozycję, a następnie ustawiono działanie przełączania jQuery na przycisku.

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

Natknąłem się na ten post, próbując wykonać to samo zadanie.

Niestety, odpowiedź Matta nie będzie działać z najnowszą wersją jQuery. W czasie pisania odpowiedzi Matta, jQuery miał dwie funkcje .toggle. W chwili, gdy piszę ten tekst, użyta w jego odpowiedzi została przestarzała. Jeśli użyty zostanie kod Matta, cały div zniknie, przycisk i wszystko. (A jeśli jesteś podobny do mnie, że będzie bardzo mylące, dopóki nie kopać się z dokumentacją API i dowiedzieć się o zmianie)

udało mi się dostać mój funkcjonalność pracy z następującego kodu:

HTML:

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

CSS (wiem, że to nie jest jeszcze bardzo czysty):

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

i wreszcie 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> 

Mam nadzieję, że jeśli przyszedłeś tu z Google, mój post będzie pomocny :)