jquery: can i animate the position:absolute to position:relative?

Question

i have a bunch of images that are positioned absolutely, i want to be able to click a button and have them all animate to where they would normally be on the page if they had the position: relative.

so is it even possible to animate from position:absolute to position:relative in jquery?

this is what i have:

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

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

})

Answer 1

No, you cannot animate it directly but you can find out the end point and animate the position there. Something like this might work when animation to the static position:

$('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');
    });
});

It's a bit hacky, but it should work.

Answer 2

I don't think you can do that. jQuery animate only works on any "numeric CSS property".

Answer 3

No.

However, you could check the element's current location (call .position()), set the position to relative, and animate from the original location to the current one.

Answer 4

I like Tatu's solution but found this reusable code to be better for my purposes:

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

Let's say I want to slide $('#elementToMove') to a new position, and I want it to take 1000 milliseconds to move. I can call this:

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

Answer 5

You can try the css method to make it relative and then animate.

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

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

})