• Q&A
  • 회원가입
  • 로그인

[Effect] JQ - slideDown() / slideUp() / slideToggle() 메서드 ★ - 슬라이드메서드 (= 미끄러지듯 내려가기/올라가기)

656  
목차
  1. slideDown() - 미끄러지듯 밑으로 내려오기
  2. slideUp() - 미끄러지듯 위로 올라가기
  3. slideToggle() - slideDown/slideUp 상호전환

 

slideDown() - 미끄러지듯 밑으로 내려오기 


$(selector).slideDown(speed,callback);

 


[매개변수]


speed
선택. 실행 완료에 걸리는 시간.  
3가지료 표현 가능. slow, fast 적을 땐 반드시 따옴표로 묶어줘야 함.
"slow"
"fast"
1/1000 초 (= 밀리초). (1초 = 1000)

callback
선택. slideDown 완료 후, 실행시킬 함수. (= 콜백함수)
※ 앞으로 "콜백"이라고 표현. 

 


[예제]


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
    $("#site").click(function(){ 
        $("#url").slideDown("slow"); 
    });
});
</script>
 
<style>
#site , #url {
    color:#fc84bd;
    padding: 5px;
    text-align: center;
    background-color: #fef5f7;
    border: solid 1px #fc84bd;
}

#url {
    padding: 50px;
    display: none;
    border-top:none; 
}
</style>
 
<div id="site">홈짱닷컴 주소 보기</div>
<div id="url">Homzzang.com</div>

결과보기

 

slideUp() - 미끄러지듯 위로 올라가기


$(selector).slideUp(speed, callback);

 


[매개변수]


speed
선택. 실행 완료에 걸리는 시간.  
3가지료 표현 가능. slow, fast 적을 땐 반드시 따옴표로 묶어줘야 함.
"slow"
"fast"
1/1000 초 (= 밀리초). (1초 = 1000)

callback
선택. slideUp 완료 후, 실행시킬 함수. (= 콜백함수)
※ 앞으로 "콜백"이라고 표현. 

 


[예제]


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
    $("#site").click(function(){
        $("#url").slideUp("slow"); 
    });
});
</script>
 
<style>
#site , #url {
    color:#fc84bd;
    padding: 5px;
    text-align: center;
    background-color: #fef5f7;
    border: solid 1px #fc84bd;
}

#url {
    padding: 50px;
    border-top:none; 
}
</style>
 
<div id="site">홈짱닷컴 주소 접기</div>
<div id="url">Homzzang.com</div>

결과보기

 

slideToggle() - slideDown/slideUp 상호전환


$(selector).slideToggle(speed, callback);

 


[매개변수]


speed
선택. 실행 완료에 걸리는 시간.  
3가지료 표현 가능. slow, fast 적을 땐 반드시 따옴표로 묶어줘야 함.
"slow"
"fast"
1/1000 초 (= 밀리초). (1초 = 1000)

callback
선택. slideToggle 완료 후, 실행시킬 함수. (= 콜백함수)
※ 앞으로 "콜백"이라고 표현. 

 


[동작]
 
※ 현재 sildeDown 상태이면, slideUp()으로 작동.
※ 현재 slideUp 상태이면, sildeDown 으로 작동.

 


[예제]


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
    $("#site").click(function(){
        $("#url").slideToggle("slow"); 
    });
});
</script>
 
<style>
#site , #url {
    color:#fc84bd;
    padding: 5px;
    text-align: center;
    background-color: #fef5f7;
    border: solid 1px #fc84bd;
}

#url {
    padding: 50px;
    display:none;
     border-top:none; 
}
</style>
 
<div id="site">홈짱닷컴 주소 접기</div>
<div id="url">Homzzang.com</div>

결과보기



찾아주셔서 감사합니다. Since 2012