Question

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

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 。

我遗憾地指出,在我第一次尝试中,我自己的估算(也)有一个瞬时的浮现机,这似乎是由于有dding的集装箱元件或舱面值,因此,该页上的CSS粉末含有以下内容:

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

似乎已经治愈了这一暂时性浮雕,而且,我怀疑,这很可能解决你自己的问题。但是,如果看不见真的 de,那么除了猜测外,难以理解问题是什么。如果这样做,我当然建议张贴 JS Fiddle ,或 JS Bin, demo,以便我们能够看到你与你合作。

Answer 2

您重新估算的<代码>img是否绝对定位? 我能够用一个绝对的位置复制img。如果你相对地看待这一形象,我认为这将解决你的问题。我树立了一个简化的例子:here。 Try changing the CSS to position:absolute and You ll see the issue.

页: 1 j Qu Qu won respect 尊重元素的行文风格,加上toggle的身高选择,也许其他人会chim。

Answer 3

这一职能使所有 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);
        })
    }
}

友情链接