728x90
300x250
SMALL
<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.slideDown(3000, "easeInBounce", function(){
alert("slideDown 완료");
})
})
$("#hide").on("click", function(){
$imgs.slideUp(3000, "easeOutBounce", function(){
alert("slideUp 완료");
})
})
});
</script>
<div id="target">
<img src="https://placeimg.com/200/120/animals/sepia" />
</div>
<div>
<button id="show">
slideDown
</button>
<button id="hide">
slideUp
</button>
</div>
728x90
반응형
LIST
'javaScript > jQuery' 카테고리의 다른 글
애니메이션 progress 옵션 - 비공개 (0) | 2023.05.24 |
---|---|
애니메이션 효과 options 활용 (0) | 2023.05.23 |
fadeIn fadeOut 서서히 나타나고 사라지는 효과 +ease (0) | 2023.05.20 |
버튼을 클릭할때마다 애니메이션 효과가 적용된 클래스 추가하기 (0) | 2023.05.18 |
클릭하면 이미지가 사라지고 나타나는 애니메이션 효과 show, hide (0) | 2023.05.17 |
댓글