Анимация обратно в исходное положение с помощью jQuery - PullRequest
Новая
       31

Анимация обратно в исходное положение с помощью jQuery

2 голосов
/ 01 января 2011

Я хочу анимировать изображение, которое пользователь щелкнул в верхнем левом углу 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);
    }

Ответы [ 3 ]

4 голосов
/ 02 января 2011

В то время как я анимирую позицию с другой позиции, отличной от вас, следующий код должен дать вам представление о том, как сделать то, что вы пытаетесь сделать: 

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

Я отмечу, что в моей первой попытке моя собственная анимация также имела мгновенное мерцание, которое, по-видимому, связано с тем, что элемент контейнера имеетотступ или отступ, поэтому панель CSS на этой странице содержит следующее: 

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

Это, похоже, излечило этот кратковременный «мерцание» и, как я подозреваю, скорее всего решило бы вашу собственную проблему.,Но не видя живого демо, невероятно сложно понять, в чем проблема, кроме догадок.Если это не поможет, я, безусловно, рекомендую опубликовать демонстрационную версию JS Fiddle или JS Bin , чтобы мы могли видеть, с чем вы работаете.

0 голосов
/ 11 мая 2013

Эта функция возвращает все анимированные стили в начальную позицию / стиль 

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);
        })
    }
}
0 голосов
/ 02 января 2011

Может ли быть так, что img, который вы анимируете, расположен абсолютно?Мне удалось воспроизвести эту проблему с абсолютно позиционированным img.Если вы расположите изображение относительно, я думаю, это решит вашу проблему.Я настроил упрощенный пример здесь .Попробуйте изменить CSS на position:absolute, и вы увидите проблему.

Я не уверен , почему jQuery не будет учитывать встроенный стиль элемента в сочетании с toggle вариант для роста, может быть, другие могут вмешаться в это.

...