CODEWITHSUNDEEP
jqueryjquery-animateprepend
loriensleafs
loriensleafs

Reputation: 2255

jquery prepend then animate div

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

Upvotes: 0

Views: 1429

Answers (2)

Abraham Uribe
Abraham Uribe

Reputation: 3118

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/

Upvotes: 1

dezman
dezman

Reputation: 19358

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

Upvotes: 1

Related Questions