JQuery asynchronous animation

Question

How do I make animate and show asynchronous (To run at the same time)? I tried to do so, but it does not work.

 $.when( $(".obj1").show(200).promise(), $(".obj2").animate(200).promise()) .done(function() { //stuff });

The code above is naturally abbreviated, but I conveyed the essence

So you need to synchronously (simultaneously) or asynchronously (not simultaneously) ??
@yuri in this case, I do not know how to say it correctly :).
There is also synchronous ajax , which is executed during the execution of the main code, that is, a line by line.

Accepted Answer · 2017-02-15T06:35:10

Your code, in principle, is working:

 $.when( $(".obj1").hide(700).promise(), $(".obj2").fadeOut(800).promise() ).done(function() { console.log('fin') });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="obj1">1</div> <div class="obj2">2</div>

Animation is executed at the same time, after both animations are completed, the code is executed.

Describe in more detail what did not work out for you and what you wanted to do.

How do I use a hideback only from hide

If you only need a single animation callback, this is much easier to do: Put the function with the 2m argument to hide() (or show() , or fadeIn() , etc.)

 $(".obj1").hide(700,function() { console.log('fin obj1') }) $(".obj2").fadeOut(1000,function() { console.log('fin obj2') })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="obj1">1</div> <div class="obj2">2</div>

I don’t really understand something, I did it and the animations were still performed in turn
@Herrgott This is possible if you assign animation to one object

JQuery asynchronous animation

1 answer 1

More articles: