使用 jQuery 动画回到原始位置

发布于 2024-10-10 03:08:38 字数 758 浏览 6 评论 0原文

我想要将用户单击的图像动画化到左上角 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);
    }

I want to animate the image which is clicked by the user to the top left 100x100 then I want it to return to its original position where the animation started but with this piece of code it keeps sliding by some pixels to the top and left. I couldn't figure out what causes this problem. How can I make it return to its original position?

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

不爱素颜 2024-10-17 03:08:38

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

$('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 FiddleJS Bin,演示,以便我们可以看到您正在使用的内容。

While I'm animating from, and to, a different position than yourself, the following code should give you an idea how to do what you're trying to do:

$('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.

I'll note that, in my first attempt, my own animation also had a momentary flicker which seems to be due to the container element having a padding, or margin, which is why the CSS pane on that page contains the following:

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

This seems to have cured that momentary 'flicker,' and, I suspect, would likely cure your own issue. But without seeing a live demo it's incredibly hard to know what the problem is, besides guessing. If this doesn't help I'd certainly recommend posting a JS Fiddle, or JS Bin, demo so that we can see what you're working with.

淑女气质 2024-10-17 03:08:38

您正在制作动画的 img 是否可能是绝对定位的?我能够使用绝对定位的 img 重现此问题。如果你相对地定位图像,我相信这会解决你的问题。我在此处设置了一个简化的示例。尝试将 CSS 更改为 position:absolute,您就会发现问题。

我不确定为什么 jQuery 不会考虑元素的内联样式与高度的 toggle 选项的结合,也许其他人可以对此发表意见。

Could it be that the img you're animating is positioned absolutely? I was able to reproduce this issue with an absolutely positioned img. If you position the image relatively, I believe this will fix your problem. I set up a simplified example here. Try changing the CSS to position:absolute and you'll see the issue.

I'm not sure why jQuery won't respect the inline style of the element in combination with the toggle option for height, maybe others can chime in about that.

━╋う一瞬間旳綻放 2024-10-17 03:08:38

此函数将所有动画样式返回到起始位置/样式

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

This function returns all animated styles to starter position/style

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);
        })
    }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文