Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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)

})
like image 824
ExodusNicholas Avatar asked Feb 04 '10 20:02

ExodusNicholas


People also ask

Can a div be relative and absolute at the same time?

Clearly, nothing can be absolute and relative at the same time. Either you want the element to position itself based on another ancestor's position or based on the page flow.

How do you animate with relative values?

To change the left or right or top or bottom of an element with a relative value, we use +=value or -=value in the CSS property, so that it changes the value at the current position to the relative increment or decrement with respect to the current position with the value given in the CSS property.

Should I use position relative or absolute?

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Position Absolute: When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

How do you set absolute position of image relative to screen center?

1) first, build a "container box" for this element. 2) Then, inside it, build a 5x5 square grid (you'll need to use either Jquery to detect width or use absolute width with CSS). It's very important that these divs have the same width and height, even if empty. 3) Make all image widths 100%.


1 Answers

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.

like image 95
Tatu Ulmanen Avatar answered Oct 20 '22 00:10

Tatu Ulmanen