Обратный вызов при завершении анимации

Question

Я хочу изменить текст внутри div после его исчезновения, а затем снова показать div. Проблема в том, что «полный» обратный вызов срабатывает не тогда, когда завершается первая анимация.

var $cart = $('.cart'); 
$cart.animate(
    { 
    opacity: 0 
    }, 
    { 
    complete: function(){ 
     console.log($cart.css('opacity')); 

     setTimeout(function(){ 
     console.log($cart.css('opacity')); 
     }, 100); 

     setTimeout(function(){ 
     console.log($cart.css('opacity')); 
     }, 200); 
    } 
    } 
) 

Выход:

1 
    0.082741 
    1.83913e-09 

Полный код, который не работает должным образом:

<a class="cart " data-tooltip="tt_cart" href="/cart"> 
    <svg class="ico"> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/site-skin/icons.svg#ico-shopping-basket"></use> 
    </svg> 
    <span class="amount_in_cart">0</span> 
</a> 

function increase_amount_in_cart(){ 
    var $amount_in_cart = $('.amount_in_cart'); 
    var amount_in_cart = parseInt($amount_in_cart.text()); 
    var $cart = $('.cart'); 

    $cart.animate(
    { 
     opacity: 0 
    }, 
    { 
     complete: function(){ 
      $amount_in_cart.text(amount_in_cart + 1); 
      $cart.animate({opacity: 1}, 'fast'); 
     }, 
     duration: 'fast' 
    } 
) 
} 

JQuery версия 1.11.2.

Answer 1

Такая ситуация была обусловлена ​​свойствами перехода css. Решение - here.