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

.animate（）并回到原始状态

2 个答案: