-
17. JQuery 요소 슬라이드(slide)하기JQuery 2022. 9. 2. 16:45
slideUp과 slideDown으로 선택한 요소에 슬라이드 효과를 줄 수 있다.
slideUp() 요소가 아래서 위로 크기가 작아지며 사라지는 효과 slideDown() 요소가 위에서 아래로 크기가 커지며 나타나는 효과 slideToggle() slideUp되어 있다면 slideDown, slideDown 되어 있다면 slideUp을 하는 효과(스위치) * 요소에 슬라이드 효과를 넣은 예시
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>문서 제목</title><style>div {padding: 5px;border: 1px solid green;background-color: yellowgreen;text-align: center;margin: 2px;cursor: pointer;}
.panel {padding: 50px 0px;display: none;}</style></head>
<body><div id="flip">menu 1</div><div id="p1" class="panel">sub menu</div>
<div id="flip2">menu 2</div><div id="p2" class="panel">sub menu</div></body><script>//마우스 인/아웃이 계속되면 이벤트가 계속 발생한다.// $("#flip").hover(function(){// $(this).next().slideDown("slow");// },// function(){// $(this).next().slideUp("slow");// });
//문제 : 애니메이션이 끝나기 전에 다음 이벤트가 발생된다.//해결방법 : 애니메이션이 끝나기 전에 다른 이벤트가 발생되지 않도록 한다.//이벤트를 on/off 를 활용 -> 애니메이션 시작 시 off / 애니메이션 끝나면 on
function down(){$(this).next().slideDown("slow");} //선택한 요소의 바로 다음 요소에 slideDown을 실행하는 down이라는 이름의 함수 정의$("#flip").on("mouseenter", down); //id가 flip인 요소에 mouseenter가 됐을 때, down()함수를 실행하는 이벤트
$("#flip").on("mouseleave", function () { //id가 flip인 요소에 mouseleave가 됐을 때의 이벤트$("#flip").off("mouseenter"); //마우스가 떠나면 위에서 on 했던 mouseenter 이벤트 삭제$(this).next().slideUp("slow", function () { //선택한 요소의 바로 다음 요소에 slideUp을 실행하고$("#flip").on("mouseenter", down); //현재 mouseenter 이벤트가 없으니까 콜백함수로~});});
//기능을 사용하는 곳이 딱 한 군데 => 익명함수가 유리//기능을 사용하는 곳이 여러 곳이다 => 일반함수가 유리
$("#flip2").click(function(){$("#p2").slideToggle("fast"); //추천 : 구조가 바뀌어도 동작//$(this).next().slideToggle("fast");});
</script>
</html>'JQuery' 카테고리의 다른 글
19. JQuery 이벤트 객체를 이용하여 animate 응용 (0) 2022.09.02 18. JQuery 요소에 애니메이션 효과 넣기 (0) 2022.09.02 16. JQuery 요소를 서서히 사라지고 나타나게 하기 (Fade effect) (0) 2022.09.01 15. JQuery 요소를 사라지거나 나타나게 하기 (0) 2022.09.01 14. JQuery 생성된 요소에 클래스 추가/삭제 하기 (0) 2022.09.01