前面的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); 
    }); 
});