2013-05-13 1 views
1

사이드 네비게이션 메뉴가 애니메이션으로 표시되어 화면 왼쪽에서 슬라이드하는 것처럼 보입니다. 애니메이션은 내가 원하는대로 작동하지만 div에서 너비를 0px으로 설정해야 화면에서 벗어난 상태로 슬라이드가 표시됩니다.div에서 화면을 벗어난 것처럼 보이게하는 동안 너비는 어떻게 수정합니까?

div의 너비를 200px으로 설정하면 애니메이션이 끝난 후 화면의 너비가 200px가되고 너비가 400px로 넓어집니다.

div의 200px 너비를 유지하면서도 애니메이션 이후 고정 너비를 유지하려면 어떻게해야합니까? 여기

가 jfiddle 예입니다 : http://jsfiddle.net/kYRbJ/1/

감사

+1

W 컨테이너의 너비를 바꾸지 않고 움직이는 것에 대한 모자 : http://jsfiddle.net/kYRbJ/4/? – sberry

+0

대신 왼쪽에서 밀어 넣으시겠습니까? –

답변

3

이 시도 :

nav#cmNav{ 
position:fixed;top:0;left:0; 
left:-200px; 
height:100%; 
width : 200px; 
background-color:#323233; 

-moz-box-shadow: inset 0 0 #000000; 
-webkit-box-shadow: inset 0 #000000; 
box-shadow:   inset -10px 0 10px -5px #000000; 

} 

$(document).ready(function(){ 

    $("#cmNav").animate({left: 0}, 1000); 


}); 
0

간단한 해결 방법 :

SEE DEMO

$(document).ready(function(){ 
    $("#cmNav").find('*').css('width','200px').end().animate({width: 200}, 1000); 
}); 
관련 문제