클릭하면 숨겨졌던 요소가 슬라이드로 표시되는 기본적인 jQuery 샘플입니다.
예제:
<head>
<style>
#side{
float:right;
width:50px;
height:50px;
background: #428D9B;
}
.hide{
display:none;
}
#slidable{
float:right;
height:50px;
background:#F4F4F4
width:200px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$( "#side" ).click(function() {
$('#slidable').animate({width: 'toggle'});
});
})
</script>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body>
<div id="container">
<div id="slidable"class="hide"><b>무엇을 도와드릴까요?</b><br>도움이 필요하세요?</div>
<div id="side">Help</div>
</div>
</body>
여기에서 크드와 실행을 확인해볼 수 있습니다.
(Source: http://stackoverflow.com/)
댓글 남기기