javaScript/jQuery
슬라이드 업/다운 효과 slideUp(), slideDown()
mooyou
2023. 5. 22. 12:51
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