Run two actions at the same time, fadein() & animate()

Question

Possible Duplicate:
How do you fadeIn and animate at the same time?

I would like to fade in and animate a div in a same time by using jquery. Here is my code:

$('#div').fadeIn('slow').animate({'left' : '5%'}, duration);

The problem is, I'm fading first and then, the div is starting to animated itself;

I tried this too, but I had no result:

$('#div').fadeIn('slow');
$('#div').animate({'left' : '5%'}, duration);

Thanks

Answer 1

Why not simply use animate() for both:

$('#div').animate({
    'left' : '5%',
    'opacity' : 1
}, 600);

Answer 2

You can try this one: http://jsfiddle.net/dXCPF/1/

$('#div').css({'display':'block', 'opacity':'0'})
         .animate({'opacity':'1','left':'5%'}, 1500);

first i did the display:none; then applied the css with jQuery and animated it too. Seems both effects at the same time.

Answer 3

animate doesn't appear to work on display: none elements (as fadeIn does). So, you might need to put this before using animate:

$('#div').css('display', 'block');
//then use animate
$('#div').animate({'left' : '5%'}, duration);

Answer 4

Try this:

$('#div').animate({ 
    opacity: 1
}, { duration: slow, queue: false });
$('#div').animate({
   left: '5%'
}, { duration: duration, queue: false });

Answer 5

you can simply use

$('#div').fadeIn(fast).animate({'left' : '5%'}, fast);