Attenuation and movement

Question

I want a simple div to disappear and move at the same time. Suppose there is a hidden image at the top, and when I click the button, the image should go to the center of the page with a fading effect.

but for me it first disappears and then starts to move ...

$('#shelf').fadeIn('fast').animate({ 'bottom': '54%' }, 'slow', function() { // Animation complete. }); 

Answer 1

try it

 $('#shelf').fadeIn('fast').animate({ 'bottom': '54%' }, {duration: 'slow', queue: false}, function() { // Animation complete. }); 

Answer 2

Using:

 $('#shelf').animate({ 'bottom': '54%', 'opacity': 1 }, 'slow', function() { // Animation complete. }); 

Answer 3

The jQuery chain events, so he thinks, "Finish fadeIn, then do this animation."

If you include fade in the animation in your code (for example: opacity: 100%; ), it will do it all at once.

Answer 4

jQuery combines events and fires them in order, so fading occurs before the animation.

Here's an example using the CSS3 transition property to care for animations.

http://jsfiddle.net/jdmiller82/UMVnD/

Answer 5

Because you put fadeIn () first in the chain. Try splitting these two into two separate calls:

  $('#shelf').fadeIn('fast'); $('#shelf').animate({ 'bottom': '54%' }, 'slow', function() { // Animation complete. }); 

Answer 6

It's good that you freeze quickly, but move slowly. Both of them begin at the same time, but first you will notice how they disappear.

Make them both the same and they will both appear at the same time.