이펙트 효과의 제어
delay 이벤트효과 지연
딜레이 걸리는 위치 시간지연시키고 싶은위치 만약사라지고 싶다면 사라지고 싶은 위치 앞쪽
<button id="fadeout">페이드아웃</button>
//fadeOut
$("#fadeout").on("click", function () {
$("#fade_p").delay(1000).fadeOut();
//delay는 페이드아웃하기 전 1초기다렸다 실행
});
stop 실행중인 모든 이펙트효과 중지시킨다
finish 실행중인 모든 이펙트효과 중지시킨다 중간과정없이 바로끝낸다
<style>
#div_box{
width: 100px;
height: 100px;
background-color: yellow;
border: solid 3px orange;
}
</style>
<body>
<!-- slideToggle() 버튼 -->
<button id="slidetoggle">toggle이펙트 효과 버튼입니다</button>
<!-- stop() 버튼 -->
<button id="stop">stop</button>
<!-- finish() 버튼 -->
<button id="finish">finish</button>
<!-- div -->
<div id="div_box"></div>
<script>
//slidetoggle
$("#slidetoggle").on(
"click", function () {
$("#div_box").slideToggle(4000);
});
//stop
$("#stop").on(
"click", function () {
$("#div_box").stop();
});
//finish
$("#finish").on(
"click", function () {
$("#div_box").finish();
});
</stop>
</body>
'JQuery' 카테고리의 다른 글
| slick 그림넣기와 화살표 버튼 docts 수정하기 (0) | 2022.03.14 |
|---|---|
| 사용자 정의 이펙트 animate (0) | 2022.03.11 |
| 슬라이드효과 (slide) .slideUp() .slideDown() .slide Toggle (0) | 2022.03.11 |
| 페이드효과 (fade) .fadeIn() .fadeOut() .fadeToggle() (0) | 2022.03.11 |
| 이펙트(effect) 효과 .hide() .show() .toggle() (0) | 2022.03.11 |