使用 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

虽然我的动画位置与您的位置不同，但以下代码应该可以让您了解如何执行您想要执行的操作：

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

    });

链接到 JS Fiddle 演示。

我会注意到，在我的第一次尝试中，我自己的动画也出现了短暂的闪烁，这似乎是由于容器元素具有填充或边距，这就是该页面上的 CSS 窗格包含以下内容的原因：

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

这似乎已经解决了短暂的“闪烁”，并且我怀疑，很可能会解决您自己的问题。但如果没有看到现场演示，除了猜测之外，很难知道问题是什么。如果这没有帮助，我当然建议发布JS Fiddle或JS Bin演示，以便我们可以看到您正在使用的内容。