jQuery - 当滑动面板显示时绝对定位 div 的“左”位置动画

我在屏幕左侧有一个隐藏面板，单击位于屏幕左侧的“选项卡”即可滑入视图。我需要面板滑过现有页面内容的顶部，并且需要选项卡随之移动。所以两者在css中都是绝对定位的。一切工作正常，除了我需要选项卡（以及选项卡容器）在面板显示时向左移动，因此它似乎粘在面板的右侧。使用浮动时相对简单，但这当然会影响现有内容的布局，从而影响绝对定位。我尝试过对面板容器的左侧位置进行动画处理（请参阅记录的 jquery 函数），但我无法让它工作。

这是我更改的原始代码的示例，如何让按钮/选项卡也滑动？

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

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

我的 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
    });
   });

  });

这是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;
}

非常感谢

我又从头开始，实际上阅读了 jQuery 文档呵呵。我将面板和按钮都放在绝对定位的 div 中，并将它们都向左浮动。给容器一个负的左侧位置，然后在按钮上放置一个 jQuery 切换操作。

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

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

        // Animation complete. CALLBACK?

    });

}, function() {

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

        // Animation complete. CALLBACK?

    });

});