使用 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，演示，以便我们可以看到您正在使用的内容。

Answer 2

您正在制作动画的 img 是否可能是绝对定位的？我能够使用绝对定位的 img 重现此问题。如果你相对地定位图像，我相信这会解决你的问题。我在此处设置了一个简化的示例。尝试将 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);
        })
    }
}