728x90
300x250
jQuery의 fadeIn fadeOut 메서드를 이용해서 서서히 사라지고 나타나는 효과 만들기
단, 애니메이션 시간은 3초이고 ease효과 완료후 alert창 띄우기
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var $imgs = $("#target");
$("#show").on("click",function(){
$imgs.fadeIn(3000, "easeInQuint", function(){
alert("fadeIn 완료");
})
})
$("#hide").on("click", function(){
$imgs.fadeOut(3000, "easeOutQuint", function(){
alert("fadeOut 완료");
})
})
});
</script>
<div id="target">
<img src="https://placeimg.com/200/120/animals/sepia" />
</div>
<div>
<button id="show">
fadeIn
</button>
<button id="hide">
fadeOut
</button>
</div>
728x90
반응형
'javaScript > jQuery' 카테고리의 다른 글
애니메이션 효과 options 활용 (0) | 2023.05.23 |
---|---|
슬라이드 업/다운 효과 slideUp(), slideDown() (0) | 2023.05.22 |
버튼을 클릭할때마다 애니메이션 효과가 적용된 클래스 추가하기 (0) | 2023.05.18 |
클릭하면 이미지가 사라지고 나타나는 애니메이션 효과 show, hide (0) | 2023.05.17 |
드래그 앤 드랍 최종버전 (0) | 2023.05.15 |
댓글