jquery - 滑入div推送内容

Question

这是我用来从左侧引入菜单的脚本演示:

Demo Fiddle

从左侧滑入的 DIV 需要将名为“左面板”和“右面板”的 div 推开，以便它们也滑动。因此，不是让隐藏的 DIV 进入并将鼠标悬停在左侧面板上，而是需要将其也按下。

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
    }
    });
});

Answer 1

您可以执行以下操作:

在 CSS 中，移除 absolute 定位并将 width 设置为 0%。

CSS:

.hidden {
    width:0%;
    background:#f90;
    color:#000;
}

然后，为 width 的值而不是 left 的值设置动画:

JavaScript:

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"width":"0%"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"width":"25%"}, "slow").addClass('visible');
    }
    });
});

演示:http://jsfiddle.net/X5mP3/

此外，还有一个替代解决方案，其中左边距的值是动画而不是宽度(在这种情况下，根据您的实际代码，您可能需要设置 overflow: hidden 到某个父元素以隐藏它后面的 div):http://jsfiddle.net/652RY/