Асинхронная анимация jQuery

400
17 февраля 2017, 03:56

Как мне сделать animate и show асинхронными (Чтобы выполнялись одновременно) ? Пробовал делать так, но не работает

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

Код выше естественно сокращенный, но суть я передал

Answer 1

Ваш код, впринципе, рабочий:

$.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>

Анимация выполняется одновременно, по завершении обеих анимаций выполняется код.

Опишите подробнее, что у вас не получилось и что вы хотели сделать.

Как мне использовать коллбэк только от hide

Если вам нужен колбек только от одной анимации, это гораздо проще сделать: Функцию положите 2м аргументом hide() (или show(), или fadeIn() и тд)

   
  $(".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>

READ ALSO
Нужно скрыть div с сгенерированным id

Нужно скрыть div с сгенерированным id

Нужно скрыть div с определнным id, полученным из localStorageЧто я делаю неправильно?

260
Маска телефона для поля input number

Маска телефона для поля input number

Есть всеми заезженый плагин ввода маски для текстового поляСтолкнулся с такой задачей, что нужно данную маску использовать для input type="number"...

318
&ldquo;Склеить&rdquo; данные в AJAX data

“Склеить” данные в AJAX data

Всем доброго времени суток! Появился следующий вопрос: Есть ajax-запрос:

284