DIV向左滑動並保持在頂部

Question

這是我嘗試完成的JSFiddle鏈接...當我點擊右側Div時，它向左滑動，但是如何使它保持在上左格的頂部...所以它是可見......

$(document).ready(function() { 
    $("#right").click(function(){ 
    $("#right").toggle("slide", {direction: "left"}, 500); 
    }); 
}); 

而且，我怎麼把第三DIV右側DIV下，所以它顯露時，右側的div移動到左側...

謝謝!!

Answer 1

我將開始與2這樣的浮動DIV：

#left{ 
    background-color: red; 
    width:50%; 
    height:150px; 
    float: left; 
} 
#right{ 
    background-color: green; 
    width: 50%; 
    height:150px; 
    float: left; 
} 

的移動div有一個絕對定位在2浮動的div始終，轉換屬性管理滑動效果：

#moving{ 
    position: absolute; 
    top: 0; 
    left: 50%; 
    width:50%; 
    background-color: blue; 
    height: 150px; 
    transition: all 0.5s; 
} 

對於絕對定位的div，我們需要包裝的div定位是相對的：

#wrapper{ 
    position: relative; 
    overflow: hidden; 
} 

然後我們添加類左上方位置：

#moving.left{ 
    transform: translateX(-100%); 
} 

的JavaScript剛剛切換的移動格上單擊時「左」類，滑動效果與CSS過渡屬性管理：

$(document).ready(function() { 
    $("#moving").click(function(){ 
     $("#moving").toggleClass("left"); 
    }); 
}); 

看到這個小提琴：

https://jsfiddle.net/mq2c2129/5/

Answer 2

要在頂部節約您必須刪除浮動，並把絕對定位：

#right, #left { 
     position :absolute; 
     top: 0; 
    } 

編輯

有了一個更好的解釋，可以試試這個：

$(document).ready(function() { 
    $("#right").click(function(){ 
     $("#right").animate({left: 0}, 500); 
    }); 
}); 

CSS

#right { 
    position: absolute; 
    left: 50%; 
    z-index:1 ; 
} 

查看小提琴：https://jsfiddle.net/mq2c2129/2/