TAG
CSS
JavaScript
Result
Run
License
<button type="button" id="btn">Click</button> <div class="target"></div> <div class="target"></div> <div class="target"></div>
.target { width: 100px; height: 100px; background: red; text-align: center; line-height: 100px; left: 0; top: 0; position: relative; display: inline-block; }
$(function() { let animateProperties = { /* 절대값으로 지정 */ borderRadius : "50px", /* 상대값으로 지정되어 호출될 때마다 200px씩 이동한다.*/ left : "+=200", /* toggle로 지정되면 호출시 원래의 가로크기와 0값이 번갈아 처리된다. */ width: ["toggle", "linear"], height : "toggle" }; $("#btn").click(function() { $(".target").eq(0).animate(animateProperties, { duration: 1000, complete: function() { $(".target").eq(2).dequeue("next2"); } }); }); $(".target").eq(1).animate(animateProperties, { duration: 1000, queue: "next1" }); $(".target").eq(2).animate(animateProperties, { duration: 1000, queue: "next2", complete: function() { $(".target").eq(1).dequeue("next1"); } }); });
Console
expand_less
License
License
by DevDic
Close