Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Moving from position A to position B slowly with animation

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...

like image 926
mark smith Avatar asked Jun 02 '09 09:06

mark smith


3 Answers

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;}
like image 66
Nadia Alramli Avatar answered Oct 22 '22 14:10

Nadia Alramli


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

$("#Friends").fadeIn('slow',function(){
  $(this).animate({'top': '-=30px'},'slow');
});
like image 26
ichiban Avatar answered Oct 22 '22 15:10

ichiban


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"
} );
like image 26
Nakilon Avatar answered Oct 22 '22 13:10

Nakilon