jquery: можно ли анимировать положение: абсолютное положение: относительное?

Question

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

так что даже можно анимировать из положения: абсолютное положение: относительное в jquery?

это то, что у меня есть:

$(".change_layout").click(function(){ 

    $(".book_img").animate({position:'relative', top:'0px', left:'0px'}, 1000) 

}) 

Answer 1

Нет, вы не можете анимировать его напрямую, но вы можете узнать конечную точку и анимировать положение там. Нечто подобное может работать когда анимация в static положение:

$('img.foo').each(function() { 

    var el = $(this); 

    // Make it static 
    el.css({ 
     visibility: 'hidden', // Hide it so the position change isn't visible 
     position: 'static' 
    }); 

    // Get the static position 
    var end = el.position(); 

    // Turn it back to absolute 
    el.css({ 
     visibility: 'visible', // Show it 
     position: 'absolute' 
    }).animate({ // Animate to the static position 
     top: end.top, 
     left: end.left 
    }, function() { // Make it static 
     $(this).css('position', 'static'); 
    }); 
}); 

Это немного Hacky, но он должен работать.

Answer 2

Я не думаю, что вы можете сделать это. jQuery animate работает только с любым «числовым CSS-свойством».

Answer 3

No.

Однако, вы можете проверить текущее местоположение элемента (назовем .position()), установите position в relative и анимировать из исходного местоположения в текущий.

Answer 4

Мне нравится решение ТАТУ, но нашел этот повторно используемый код, чтобы быть лучше для моих целей:

function specialSlide(el, properties, options){ 
    //http://stackoverflow.com/a/2202831/ 
    el.css({ 
     visibility: 'hidden', // Hide it so the position change isn't visible 
     position: 'static' 
    }); 
    var origPos = el.position(); 
    el.css({ 
     visibility: 'visible', // Unhide it (now that position is 'absolute') 
     position: 'absolute', 
     top: origPos.top, 
     left: origPos.left 
    }).animate(properties, options); 
} 

Скажем, я хочу, чтобы скользить $ («# elementToMove») на новую позицию, и я хочу его потребуется 1000 миллисекунд для перемещения. Я могу назвать это:

var props = {'top' : 200, 'left' : 300}; 
var options = {'duration': 1000}; 
specialSlide($('#elementToMove'), props, options);