Question

以下是我用来从左侧输入菜单的脚本演示：

从左侧滑入的DIV将需要推动名为“左侧面板”的div。和＆＃39;右面板＆＃39;不碍事，所以他们也滑了。因此，不是隐藏的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');
    }
    });
});

DEMO：http://jsfiddle.net/X5mP3/

此外，这是一个替代解决方案，其中左边距的值是动画而不是宽度（在这种情况下，根据您的实际代码，您可能需要设置{ {1}}向某个父元素隐藏其背后的div）：http://jsfiddle.net/652RY/

Answer 2

您可以通过设置包含所有三个div元素的容器来完成此操作。使用左侧菜单所具有的宽度量为conatainers left属性设置动画。

http://jsfiddle.net/ZQTFq/1916/

HTML

<div class="container">
    <div class="hidden">Here I am !</div>
    <div class="left">Left panel</div>
    <div class="right">Right panel</div>
    <div class="clear"></div>
</div>
<div>
<a href="#" id="slide">Show/hide Slide Panel</a>
</div>

JS

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

CSS

.container{
    position:absolute;
    width:100%;
}
.left, .hidden {
    float: left;
    height:350px;
    position:absolute;
    left:-140px
}

.left {
    width: 50%;
    background: #fff;
    z-index:1;
}

.hidden {
    width:25%;
    z-index:2;
    background:#f90;
    color:#000;
}

.right {
    width:50%;
    float: right;
    height:350px;
    background:#000;
    color:#fff;
}

.clear {
    clear:both;
}

#slide{
    position:fixed;
    bottom:0;
}
}

滑入div以推送内容

2 个答案: