jquery - jquery幻灯片在前面

Question

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

我想用 Jquery 将一个 div 滑到另一个 div 前面。

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

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

Answer 1

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

Answer 2

您所要做的基本上就是使用绝对定位并控制通过z-index. 剩下的就是简单的动画

检查此站点以获取演示http://jsbin.com/egula/（源代码为http://jsbin.com/egula/edit ）

例如

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