jquery prepend then animate div

Question

hey I have a div that I'm prepending to the body of my HTML doc, after I prepend it I'd like to run an animation function on it, but for some reason the animation never fires.

Right now I'm chaining them together like so:

        $(".role-1").prependTo("body").animate({
            position:fixed,
            top:0
        },{
            duration:300,
            queue:false
        });

The prepend works fine, the animation just never runs, I'm not sure why, any thoughts? Thanks

Answer 1

you can change the position to fixed with .css like this

$(".role-1").prependTo("body").css({position:"fixed"}).animate({
        top:0
        },{
        duration:300,
        queue:false
});    

CSS

.role-1{
  top:500px;   //if it is 0px it will not animate
}

http://jsfiddle.net/pNBQk/

Answer 2

I think this is what you were trying to do.

JS:

$('<div>').prependTo("body").animate({
    top: '40px'
}, 300);

CSS:

div {
    height: 100px;
    width: 100px;
    background: blue;
    position: relative;
}

This, down here, will work, but there is no animation because the I created has no height or width and is already positioned at the top of the body.

$("<div></div>").prependTo("body").animate({
    position:'fixed',
    top:0
},{
    duration:300,
    queue:false
});