javascript - 几秒钟后，如何编辑该 fiddle 以关闭动画？

几秒钟后，如何编辑该小提琴以关闭动画？

$('div').animate({left: 0});

div{
  background: red;
  height: 100px;
  width: 100px;
  position: absolute;
  left: -100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

小提琴：http://jsfiddle.net/jamygolden/Ctv6N/

更新代码：-此代码中的此框移至右侧，并且不会从窗口中完全消失。

<div class="animateSliding" id="animateSliding">
    <script type="text/javascript">
        $('#animateSliding').animate({right: 0}, 1000, function() {
            var animateStuff = $(this);
            var duration = 3000;
            setTimeout(function () {
                animateStuff.animate({right: '-300px'});
            }, duration);
        });
    </script>
    <p>You are almost done!</p>

</div>

的CSS

.animateSliding {
background: #b2b2b2;
border-top: 3px solid #ccc;
height: 200px;
width: 300px;
position: absolute;
right: -300px;
padding-top: 80px;
padding-left: 80px;
border-radius: 5px;
color: white;

}

最佳答案

您需要使用setTimeout()

$('div').animate({left: 0} , 1000 , function(){
   var ThisIt = $(this);
   var duration = 3000; // 3s duration to close -- change it as you like
   setTimeout(function(){
      ThisIt.animate({left: '-100px'});
   }, duration);
});

Working Demo