javascript - 我如何编辑这个 fiddle 以在几秒钟后关闭动画？

Question

如何编辑此 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>

fiddle :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;

}

Answer 1

您需要使用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