Animate css attributes: from "top" to "bottom"
<p><strong>Update 2</strong></p>

<p>I figured it out. If anyone have similar problems, see my answer.</p>

<p><strong>Update</strong></p>

<p>jsFiddle: <a href="http://jsfiddle.net/HBUAx/" rel="nofollow">http://jsfiddle.net/HBUAx/</a></p>

<p><strong>Post</strong></p>

<p>I'm working on a few animations with jQuery.
I have 3-4 elements which should slide in from the top. I defined their positions with css:</p>

<pre><code>#element-1 {
    top:124px;
    left:0px;
    right:auto;
    bottom:auto;
}

#element-2 {
    top:230px;
    left:670px;
    right:auto;
    bottom:auto;        
}

#element-3 {
    top:auto;
    left:0px;
    right:auto;     
    bottom:100px;
}
</code></pre>

<p>Then I save their positions initial on pageload, cause i have to manipulate the css value to </p>

<pre><code>top: -1000px
</code></pre>

<p>to hide them and make the "slide in from top" animation possible.</p>

<pre><code>var image_margins = [];
$('img').each(function() {
    var obj = $(this),
        id = obj.attr('id'),
        mtop = obj.css('top'),
        mleft = obj.css('left'),
        mright = obj.css('right'),
        mbottom = obj.css('bottom');

    // save alle margins in array
    image_margins[id] = {mtop:mtop,mleft:mleft,mright:mright,mbottom:mbottom};

    // hide all content elements 
    obj.css({'top':'-1000px'});

}); 
</code></pre>

<p>When the user clicks the animate button, the elements should slide to their saved positions.
The problem: i can't remove the <code>top</code> attribute. Some elements only have bottom margins. I tried to set <code>top</code> to <code>auto</code> or <code>''</code>, but it's always <code>0px</code> in DOM inspector. And <code>bottom</code> don't work if <code>top</code> is set. How can i get rid of the <code>top</code> attribute?</p>

<pre><code>$('.button').click(function(){
    $('img').each(function() {
        var image = $(this),
            id = image.attr('id'),
            timeout = 0;

        setTimeout(function() {
            var mtop, mleft, mright, mbottom;
            if (image_margins[id].mtop != 'auto') { mtop = image_margins[id].mtop; } else { mtop = ''; }
            if (image_margins[id].mleft != 'auto') { mleft = image_margins[id].mleft; } else { mleft = ''; }
            if (image_margins[id].mright != 'auto') { mright = image_margins[id].mright; } else { mright = ''; }
            if (image_margins[id].mbottom != 'auto') { mbottom = image_margins[id].mbottom; } else { mbottom = ''; }
            image.animate({'top':mtop,'left':mleft,'right':mright,'bottom':mbottom},500);

        },timeout);
        timeout = timeout + 200;
    }); 
});
</code></pre>
