I have a simple jQuery animation using fadein
and it works but once faded in... I wish to MOVE using TOP property 30 pixels upwards, but slowly.
This is what I have so far:
$('#Friends').fadeIn("slow");
I have both jQuery and jQuery UI loaded...
Use jquery animate and give it a long duration say 2000
$("#Friends").animate({
top: "-=30px",
}, duration );
The -= means that the animation will be relative to the current top position.
Note that the Friends
element must have position set to relative in the css:
#Friends{position:relative;}
You can animate it after the fadeIn completes using the callback as shown below:
$("#Friends").fadeIn('slow',function(){
$(this).animate({'top': '-=30px'},'slow');
});
I don't understand why other answers are about relative coordinates change, not absolute like OP asked in title.
$("#Friends").animate( {top:
"-=" + (parseInt($("#Friends").css("top")) - 100) + "px"
} );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With