jQueryで元の位置にアニメーションを戻す

Question

ユーザがクリックした画像を左上100x100にアニメートしたいのですが、アニメーションが開始された元の位置に戻したいのですが、いくつかのピクセルによって上下にスライドします。私はこの問題の原因を突き止めることができませんでした。どうすれば元の位置に戻すことができますか？

var posLeft; 
var posTop; 

$(this).children("img").click(function() { 


     goToTopLeft($(this)); 

     $.each($(this).parent().children("img"), function() { 

      $(this).css("z-index","0"); 

     }); 

     goToFrontFromTopLeft($(this)); 

     $(this).css("z-index", "1"); 



    }); 

function goToTopLeft(img) { 
     posLeft = img.position().left; 
     posTop = img.position().top; 
     img.animate({ top: '-=100', left: '-=100', height: 'toggle' }, 500); 
    } 

    function goToFrontFromTopLeft(img) { 
     img.animate({ top: posTop, left: posLeft, height: 'toggle' }, 500); 
    } 

Answer 1

Iからアニメーション、およびにしていますが、自分とは異なる位置に、次のコードは、あなたが何をしようとして行うにはどのようにアイデアを与える必要があります。

$('img').click(
    function(){ 
     var offset = $(this).offset(); 
     var originLeft = offset.left; 
     var originTop = offset.top; 
     $(this).animate(
      { 
       'top' : '400px', 
       'left': '200px' 
      }, 1500, function() { 
       $(this).animate({ 
        'top': originTop, 
        'left' : originLeft 
      }, 1500) 
        }); 

    }); 

Link to JS Fiddle Demo 。

私の最初の試みでは、でもには、詰め物や余白があるコンテナ要素によるものと思われる瞬間的なちらつきがあります。そのため、そのページのCSSペイン

body, div, iframe { 
    padding: 0; 
    margin: 0; 
} 

これは、この瞬間的な「ちらつき」を治したようですが、あなた自身の問題を解決する可能性があります。しかし、ライブデモを見ることなく、推測に加えて、問題が何であるかを知ることは非常に難しいです。これで問題が解決しない場合は、JS Fiddle、またはJS Binというデモを投稿することをお勧めします。

Answer 2

アニメーション化しているimgは絶対に配置されていますか？私はこの問題を絶対的に位置づけられたimgで再現できました。画像を相対的に配置すると、これで問題が解決されると思います。私は簡略化した例hereを設定しました。 CSSをposition:absoluteに変更してみてください。問題が表示されます。

私は jQueryの高さtoggleオプションと組み合わせた要素のインラインスタイルを尊重しない理由、多分他の人がそれについてチャイムできるかわかりません。

Answer 3

この機能は、すべての

var animate = function(selector, obj) { 
    var original = {}; 
    if (!$(selector).is(":animated")) { 
     $.each(obj, function(i, v) { 
      original[i] = $(selector).css(i); 
     }); 
     $(selector).animate(obj, function() { 
      $(selector).animate(original); 
     }) 
    } 
}