如何在幾秒後編輯此小提琴以關閉動畫？

Question

如何在幾秒後編輯此提琴以關閉動畫？

$('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; 

}

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您可以添加第二個參數，即持續時間。還有一個參數完成是一個回調當動畫結束呼叫：

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

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>

Answer 3

你可以這樣使用它：

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

更改超時（目前2000）whith你想要的價值。