[jQuery] div position 움직이기

개발/Javascript

신매력 2012. 12. 7. 16:51

검은 부분을 클릭하면 네모가 오른쪽으로 가고,

한번 더 누르면 제자리(왼쪽으로) 움직이는 예제. (미리보기는 없다 ㅋㅋ)

나는 이걸로 메뉴 열고 닫기에 응용할 것이다.

<html>

<head>

<style>

#container {

position:absolute;

background-color:#abc;

left:50px;

width:90px;

height:90px;

margin:5px;

}

#menu {

position:absolute;

background-color:#000000;

width:10px;

height:90px;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

</div>

var menu_flag = true;

$("#menu").click(function(){

if (menu_flag) {

$("#container").animate({"left": "+=300px"}, "slow");

menu_flag = false;

} else {

$("#container").animate({"left": "-=300px"}, "slow");

menu_flag = true;

}

});

</script>

</body>

</html>