.animate（）と元の状態に戻る

Question

私はjQueryに少し慣れており、それを学ぼうとしています。親がクリックされた後で要素をアニメートしていますが、設定した時間が経過しても要素が元の状態に戻るようにします。私はsetTimeoutを試しましたが、間違って使用している可能性がありますので、動作しませんでした。誰かがこれを行う方法を説明することはできますか？

var span = $('span'); 

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


    span.animate({ 

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

     }); 
    }); 

Answer 1

このようにすることができます。ここ

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/

あなたはそれらの間の時間遅延で複数のアニメーションを左の元の値を保存し、チェーンに delay()メソッドを使用します

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