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

    });

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

使用jQuery动画回原始位置

3 个答案: