可摺疊/滑動「托盤」（DIV）

Question

Slide right to left?

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

我一直在上面之間跳轉試圖讓我的「托盤」的工作無濟於事。部分問題是我不希望其中一個div完全消失。我想要一個「托盤」，一個長矩形，點擊後會滑出包含名稱的div。現在我把它設置爲反向，但我無法弄清楚如何讓擴展爲默認隱藏的div（*我也不明白爲什麼它們是不同的顏色，但具有相同的CSS）。

http://jsfiddle.net/r6yWP/

HTML：

<div class ="collapsedTray"> 
<div class="expandTray"> 
    Joey Joe Joe Jr.</br> 
    Tommy Thompson Thomas III</br> 
    Stephen Stephenson </br> 
    Cool Mo Dee Tomahawk Fire Marshall Bill</br> 
</div> 

CSS：

.collapsedTray { 
    width:10px; 
    height: 500px; 
    background:grey; 
    opacity:0.5; 
    position: absolute; 
    left:0; 
} 

.expandTray { 
    white-space: nowrap; 
    height: 500px; 
    background:grey; 
    opacity:0.5; 
    position: absolute; 
    left:0; 
    padding:8px; 
} 

Y：

$('.collapsedTray').click(function(){ 
    var $lefty = $('.expandTray'); 
    $lefty.animate({ 
     left: parseInt($lefty.css('left'),10) == 0 ? 
     -$lefty.outerWidth() : 
     0 
}); 
    }); 

Answer 1

在CSS中給左值爲負值，以便默認隱藏。

.expandTray { 
    left:-999px; 
} 

看到fiddle

而且不同的顏色是因爲你有collapsedTray內的expandTray，兩者都具有0.5因此內的div的不透明度有更多的不透明度。