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

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>

결과보기