jQuery Sliding는 어떤 내용이 위, 아래로 슬라이딩하게 하는 역할을 합니다.
slide 종류에는 slideDown(), slideUp(), slideToggle() 이 있습니다.
slideDown()
기본 문구는 $(selector).slideDown(speed,callback); 처럼 사용합니다.
괄호() 안에 숫자를 넣어 속도를 조절할 수 있으며, "slow", "fast" 등을 사용할 수 있습니다.
$("#flip").click(function(){
$("#panel").slideDown();
});
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">이곳을 클릭해보세요!!</div>
<div id="panel">안녕하세요<br>Park's의 블로그 입니다.</div>
</body>
</html>
// div 영역 "flip" 을 클릭하면 "안녕하세요 ~" 내용이 아래로 슬라이딩 됩니다.
----------------------------------------------------------------------------------------
slideUp()
기본 문구는 $(selector).slideUp(speed,callback); 처럼 사용합니다.
괄호() 안에 숫자를 넣어 속도를 조절할 수 있으며, "slow", "fast" 등을 사용할 수 있습니다.
$("#flip").click(function(){
$("#panel").slideUp();
});
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">이곳을 클릭해보세요!!</div>
<div id="panel">안녕하세요<br>Park's의 블로그 입니다.</div>
</body>
</html>
// div 영역 "flip" 을 클릭하면 "안녕하세요 ~" 내용이 위로 슬라이딩 됩니다.
slideToggle()
이전 내용에서도 Toggle()은 두 가지를 동시에 실행합니다. 여기서는 up, down을 동시에 실행합니다.
관련예제를 보시고 확인해보시기 바랍니다. 그리고 사용법은 위와 동일 합니다.
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">이곳을 클릭해보세요!!</div>
<div id="panel">안녕하세요<br>Park's의 블로그 입니다.</div>
</body>
</html>
// id flip을 클릭을 하면 위처럼 내용이 위, 아래로 슬라이딩 됩니다. 관련예제를 참고로 직접 여러가지 형태로 작성해보시기 바랍니다.
그리고 괄호 toggle()안에 숫자(1000,3000), "slow", "fast" 등을 넣어서 속도가 어떻게 틀리지는지 테스트 직접 해보시기 바랍니다.
응용을 많이 해봐야 실력이 조금씩 늘거든요.
다음 장에서는 jQuery Effects - Animation 효과에 대해 알아보겠습니다. Animation 은 말그대로 애니메이션 효과를 만들수 있습니다. 재미있고 신기한 효과를 경험하실수 있습니다.
'jQuery > jQuery Effects' 카테고리의 다른 글
| jQuery stop(),Callback,Chaining (0) | 2013.05.16 |
|---|---|
| jQuery Effects - Animation (0) | 2013.05.15 |
| jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo() (0) | 2013.05.13 |
| jQuery hide(), show(), toggle() (0) | 2013.05.13 |
