-
21006_animate,button,eachJQuery 2021. 10. 6. 17:19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<button type="button">애니메이션#1</button>
<button type="button">애니메이션#2</button>
<div id="box"></div>
<script type="text/javascript">
$("#box").css({
"width":"100px",
"height":"100px",
"border":"1px solid red"
});
//버튼이벤트..id 안 줬을때
$("button:eq(0)").click(function() {
$("#box").animate({width: "+=100px", borderWidth: "20px",opacity: "0.2",
marginLeft: "300px"},3000);
});
$("button:eq(1)").click(function() {
$("#box").animate({width: "-=100px", borderWidth: "1px",opacity: "1",
marginLeft: "0px"});
});
</script>
<hr>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<script type="text/javascript">
$(".box2").css({
position: "relative",
width: "60px",
height: "60px",
backgroundColor: "tomato",
marginTop: "5px"
});
//box2에 300px씩 이동
$(".box2").each(function(i, element) {
/* delay는 여러개가 동시에 되는 게 아니라 각각 1개씩 지정한 밀리초를 두고 행해짐 */
$(this).delay(i*500).animate({left: "+=300px"},'slow');
});
</script>
<hr>
<img alt="" src="../image/08.png" id="img1">
<script type="text/javascript">
/* animate 안 하고도 사라졌다 나타내기 가능 */
$("#img1").slideUp(2000).delay(1000).slideDown(2000);
</script>
</body>
</html>
기본화면(바로 동작행해짐) --------> 애니메이션#1 버튼 누른 후 'JQuery' 카테고리의 다른 글
211006_ (0) 2021.10.06 211006_on(동적/정적) (0) 2021.10.06 211006_image,each,figure (0) 2021.10.06 211006_array,each (0) 2021.10.06 211006_figure (0) 2021.10.06