.animate（）並返回到原始狀態

Question

我對jQuery有點新，並試圖學習它。我在單擊父元素後爲其設置動畫元素，但我也希望元素在設定的時間段後回到原始狀態。我嘗試了setTimeout，但我可能會錯誤地使用它，所以它不起作用。有人可以解釋如何做到這一點？

var span = $('span'); 

$('button').click(function(){ 


    span.animate({ 

     left: '200' }, 500, 'linear', function() { 

     }); 
    }); 

Answer 1

你可以這樣做。您保存左原值和使用delay()方法把多個動畫與它們之間的時間延遲：

var span = $('span'); 
// insert span into your document somehow 
// set absolute positioning on it 
$('button').click(function(){ 
    var origLeft = span.css("left"); 
    span.animate({left: '200' }, 500, 'linear').delay(2000).animate({left: origLeft}, 500, 'linear'); 
}); 

工作示範這裏：http://jsfiddle.net/jfriend00/zB5NL/

Answer 2

這並不完全清楚您的意思，但您可以保存CSS屬性的初始值，然後在回調中設置「後退」。並且您應該將該跨度附加到DOM，然後才能爲其設置動畫效果。 類似於：

var span = $('span'); 
$('body').append(span); 
$('button').click(function() { 
    var left = span.css('left'); 
    span.animate({ 
     left: '200' 
    }, 500, 'linear', function() { 
     //animate back to starting position 
     span.animate({ 
     left: left 
    }, 500, 'linear'); 
    }); 
});