Slide right to left?
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
我一直在上面两种方法之间切换,试图让我的“tray”工作,但都没有用。部分问题是我不想让其中一个div完全消失。我想要一个“tray”,一个长矩形,当点击它时,它会滑出包含名称的div。现在我把它设置为反向。但我不知道如何将扩展为默认隐藏的div(* 我也不明白为什么它们的颜色不同,但CSS相同)。
http://jsfiddle.net/r6yWP/
于飞:
<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;
}
詹:
$('.collapsedTray').click(function(){
var $lefty = $('.expandTray');
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
1条答案
按热度按时间w46czmvw1#
在CSS中为left value指定一个负值,以便默认情况下隐藏它。
请参阅fiddle
颜色不同是因为expandTray在collapsedTray内部,两者的不透明度都是0.5,因此内部div的不透明度更高。