Attenuation and movement

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. }); 
+6
source share
6 answers

try it

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

Using:

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

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.

+1
source

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/

0
source

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. }); 
-2
source

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.

-3
source

Source: https://habr.com/ru/post/893502/


All Articles