Question

只是一个简单的问题（希望如此）。

我想用Jquery在另一个div前面滑动一个div。

我不想隐藏一个div，然后向下滑动另一个div，当另一个滑入时，我不想将一个div向下推。

有没有人知道这样做的好方法，可能是使用Jquery的插件？

Answer 1

对div使用 绝对定位 ，滑动时它们不会相互影响。

Answer 2

你所要做的就是使用绝对定位和控制通过z-index显示哪一个。其余的是简单的动画

在此网站上查看演示http://jsbin.com/egula/（源代码http://jsbin.com/egula/edit）

e.g。

div.first, div.second {
    position:absolute;
    top:20px;
    left:20px;
    background-color:red;
    height:100px;
    width:100px;
}
div.second {
    z-index:-20;
    background-color:yellow;
}

<div class="first">foo</div>
<div class="second">bar</div>

$(document).ready(function(){
    $(WHATEVERSELECTOR).click(function() { //or bind differently
        //jQuery core version
        $(".second").css("width", 0).css("z-index","1").animate({ width: "100px" }, 2000); 
        //use this line if have jQuery UI included anyway
        //$(".second").hide().css("z-index","1").show("slide", { direction: "left" }, 2000);
    });
});

Jquery在前面滑动

2 个答案: