http://jqueryui.com/toggle/

我用过切换,选中“drop”.这模仿了从窗口左侧滑入.适用于IE7和Chrome.

我把我的div内容改为“position：fixed”;为了我的目的,我喜欢这个,因为我可以控制是否要进行叠加或者是否希望我的内容被推送.

然后使用该div内容,我可以添加一个jquery的“animate”函数,并将其滑动到我想要的任何位置.

https://api.jquery.com/animate/

随着时间的推移,我将创建自己的库,以尽可能少的CSS样式击败其他人.但就目前而言,我只需要把我的东西包起来.

编辑：2014年6月17日 – 这是在我在这里发布答案几乎几天后实施的
这是我使用jquery ui实现的代码：
请注意,twitter bootstrap不会干扰此代码,因为此时它纯粹用作css.

使用的组件：

>一个用于切换滑动的按钮,我给它一个id =“按钮”.
> id =“effectMenu”的div面板

>这是菜单滑动和消失的原因

> id =“effectContent”的div面板(显示在effectMenu旁边)

>当菜单滑动并淡出时,会滑入空白区域
>当菜单滑动并返回时,会滑动并允许菜单返回

>一个id =“positionOfEffect”的隐藏输入框

>用于确定内容应滑动到的位置

>一个id =“didContentSlide”的隐藏输入框

>保持一个布尔值：如果内容移动到新位置,则为true;如果内容移回原始状态,则为false

所以你得到这样的东西：

<button type="button" id="button" class="btn btn-default btn-lg" />
<div class="row">
    <div id="effectMenu" class="col-md-4">
        ...
    </div>
    <div id="effectContent" class="col-md-4">
        ...
    </div>
</div>
<input id="positionOfEffect" type="hidden" />
<input id="didContentSlide" type="hidden" />

现在jquery代码：

$('body').on('click','#button',function (e) {
    e.preventDefault();

    //position of the effect menu
    var positionOfEffectMenu = $("#positionOfEffectMenu").val();

    //gets the value of whether or not the content slide to the new position
    //true if it did,false if it returned back to the original position
    var didContentSlide = $("#didContentSlide").val();

    //starting position of everything,capture the current state at this point
    //this is the page load set up
    if (positionOfEffectMenu == "") {
        //mimic the behavior of md-col-4 (33.333333% of screen)
        $("#positionOfEffect").val((($(".row").width() * 0.33333333)));
        $("#didContentSlide").val(false);
        positionOfEffectMenu = $("#positionOfEffectMenu").val();
        didContentSlide = $("#didContentSlide").val();
    }

    /**
     *   How far we want the transition to occur for the sliding content.
     *   The divided by 2 means,we're only going to be moving half the 
     *   distance of the menu's width while the menu disappears.
     *   In my page,this makes a very space-friendly behavior
     *   originally the menu is all the way to the far right,and I have content
     *   next to it if I'm bringing the menu out,I dont want the content 
     *   page to swing all the way to where the menu is,I want it to move
     *   just a bit so that it can fill up the space and look good for the user
     *   to focus in on.
     */
    positionOfEffect = parseFloat(positionOfEffectMenu) / 2;
    didContentSlide = didContentSlide == "true"; //turns string to bool value

    //I disable my button as its sliding otherwise if the user frantically clicks
    //it will intercept the positions and hijack the animation
    //it gets re-enabled later in this code
    var $elt = $(this).attr('disabled',true);

    //begin the animation

    //Now.. move the effect content to the new position
    //or if it is already at the new position,move it back to where it was before
    $("#effectContent").animate({
        left: (!didContentSlide) ? "-=" + (positionOfEffect) + "px" : "+=" + (positionOfEffect) + "px"
    },500,function () {

    })
    //as the content is going in,drop the effectMenu out of the page
    //or if the content is going back out,bring the effectMenu into the page
    .queue(function () {
        $("#effectMenu").toggle("drop",{},500);
    }).dequeue();

    //this is for the button.. its re-enabled when everything stops moving
    setTimeout(function () {
        $elt.attr('disabled',false);
    },500);

    //update the value of whether or not the contents slid into the new position
    didContentSlide = (!didContentSlide);
    $("#didContentSlide").val(didContentSlide);

    //override the defaults of the button
    return false;
});