Ich habe ein verstecktes Feld auf der linken Seite des Bildschirms, das beim Klicken auf eine Registerkarte auf der linken Seite des Bildschirms eingeblendet wird. Ich brauche das Bedienfeld, um über den vorhandenen Seiteninhalt zu gleiten, und ich brauche die Registerkarte, um sich mit ihm zu bewegen. und so sind beide absolut in CSS positioniert. Alles funktioniert einwandfrei, abgesehen davon, dass der Tabulator (und damit der Tabulator-Container) mit dem Bedienfeld nach links verschoben werden muss, wenn er angezeigt wird, sodass er an der rechten Seite des Bedienfelds zu kleben scheint. Die Verwendung von Floats ist relativ einfach, wirkt sich jedoch natürlich auf das Layout des vorhandenen Inhalts aus und ist daher absolut positionierbar. Ich habe versucht, die linke Position des Panel-Containers zu animieren (siehe die dokumentierte jquery-Funktion), aber ich kann es nicht zum Laufen bringen.

Dies ist ein Beispiel für den ursprünglichen Code, den ich geändert habe. Wie kann ich die Schaltfläche / Registerkarte auch verschieben?

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

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

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

  });

und das ist die 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;
}

Danke vielmal