728x90
반응형
.animate()를 이용한 animation
run을 눌렀을 때 아래 box가 움직이는 animation 만들기
1. body
<body>
<p><a href="#" class="run">run</a></p>
<div id="box"></div>
</body>
2. script
<style type="text/css">
a{font-weight: bold; color:#000000;}
#box{background: skyblue; width:100px; height:100px; position: relative;}
</style>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".run").click(function(){
$("#box").animate({opacity:"0.1", left:"400px"}, 1000)
.animate({opacity:"0.4", top:"160px", width:"20px", height:"20px"})
.animate({opacity:"1", background:"#111111", left:"0px", width:"100px", height:"100px"}, "slow")
.animate({top:"0px"}, "fast")
.slideUp()
.slideDown("slow");
});
});
</script>728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]toggleClass (0) | 2020.08.03 |
|---|---|
| [JQ]effect_03 (0) | 2020.08.03 |
| [JQ]effect_01 (0) | 2020.08.03 |
| [JQ]event (0) | 2020.08.03 |
| [JQ]DOM_기타탐색메소드 (0) | 2020.07.31 |
