var $btnMove = $(".btn_movebox"), $btnReset = $(".btn_reset"), $normalBox = $(".box1"), $tweenBox = $(".box2"); var myTween = null; $btnMove.on('click',function(e){ e.preventDefault(); $normalBox.animate({left:"80%"}, 1500,"linear"); myTween = new TweenMax.to($tweenBox, 1.5, {left:"80%", ease:Linear.easeNone}); myTween.resume(); }) $btnReset.on('click',function(e){ e.preventDefault(); $normalBox.stop().css("left","0"); myTween.kill(); $tweenBox.css("left",0); })
<a href="#" class="btn btn_movebox">Move!Move!</a> <a href="#" class="btn btn_reset">Reset</a> <h4>TweenMax 사용</h4> <div class="box box2"></div> <h4>jQuery animate 사용</h4> <div class="box box1"></div>
.btn{display:inline-block;background-color:#e1e1e1;border:1px solid #000;margin-right:5px;} .box{position:relative;top:0;left:0;width:30px;height:30px} .box1{background-color:#5e54ed} .box2{background-color:#5e54ed}