.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'); 
    }); 
});