jquery moving from postion X to position Y slowly - animation?

Question

Hi there,

i have a simple jquery animtion 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");

Any ideas?

I have both jquery and jquery UI loaded...

Answer 1

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.

Answer 2

You can animate it after the fadeIn completes using the callback as shown below:

$("#Friends").fadeIn('slow',function(){
  $(this).animate({'top': '-=30px'},'slow');
});

Answer 3

Thanks Mark! Position relative did the trick :)