Question

如何编辑这个小提琴以在几秒钟后关闭动画？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

小提琴：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

Answer 2

根据Animate，您可以添加第二个参数，即持续时间。还有一个参数完成，它是动画结束时要调用的回调：

＆＃13;

$(function () {
  $('div').animate({left: 0}, 3000, "swing", function() {
     $(this).animate({left: '-100px'});
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以这样使用它：

$('div').animate({left: 0}, function(){
   setTimeout(function(e){
       $('div').animate({left: -100})
  }, 2000)
});

使用您喜欢的值更改超时（当前为2000）。

如何编辑这个小提琴以在几秒钟后关闭动画？

3 个答案: