How to run multiple jQuery effects at same time -

i trying achieve this. there box. set hide() in jquery. has fade in, @ same time, has move length top bottom. whatever length top bottom, fade in effect should begin when box start moving top , fade effect may complete when box completes it's movement top.

here tried;

<div id="div1">div</div> 

and

$("#div1").animate({"margin-top": 200,}); $('#div1').fadein("slow"); 

but 2 functions use different time. how can this?

here working fiddle.

thanks in advance...:)

try doing both animations css in same animate call:

http://jsfiddle.net/xhrbq/

$("#div1").animate({     'margin-top': 300,     'opacity': 1 }, 1000);