사용자정의 이펙트
animate
사용자가 직접원하는 이펙트 효과정의
중간대문자 방식으로만 속성명 사용
ex) backgroundColor (0) background-color (X)
<style>
#div_box2{
width: 100px;
height: 100px;
background-color: yellowgreen;
border: solid 3px green;
}
</style>
<body>
<button id="animate">ainmate</button>
<div id="div_box2"></div>
//사용자애니메이션
$("#animate").on("click",function () {
$("#div_box2").animate({
//css속성과 값(끝날때)
opacity : 0, //1다보임 0안보임
width :0, //너비 줄어듬
height :0 //높이 줄어듬
},1000, //진행되는 밀리초
function() { //애니메이션이 끝났을때 실행되는 함수
$("#animate").text("이벤트가끝났음")//버튼이름바꾸기
});
});
</body>
</script>
'JQuery' 카테고리의 다른 글
| jquery 플러그인 Magnific Popup사용법 (0) | 2022.03.16 |
|---|---|
| slick 그림넣기와 화살표 버튼 docts 수정하기 (0) | 2022.03.14 |
| 이펙트효과제어 .delay() .stop() .finish() (0) | 2022.03.11 |
| 슬라이드효과 (slide) .slideUp() .slideDown() .slide Toggle (0) | 2022.03.11 |
| 페이드효과 (fade) .fadeIn() .fadeOut() .fadeToggle() (0) | 2022.03.11 |