前面的jquery幻灯片

Question

只是一个简短的问题（希望）。

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

我不想隐藏一个DIV，然后将另一下来，我不想推一个DIV下来时，另一个幻灯片

有谁知道一个好办法做到这一点，可能与JQuery的插件？

Answer 1

使用绝对定位为divs和他们不会影响彼此滑动时。

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