Fire callback when animation ends

Question

I want to change a text inside a div after it disappears and then show div again. The problem is that 'complete' callback fires not when the first animation completes.

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);
    }
  }
)

The output is:

  1
  0.082741
  1.83913e-09

Full code, which doesn't work properly:

<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 version is 1.11.2.

I tried your script and it run totally as expected: https://jsfiddle.net/qsgtaz2t/ — Long Nguyen, Nov 18 '15 at 08:38

score 0 · Accepted Answer · edited May 23 '17 at 11:59

0

Such situation was because of css 'transition' property. The solution is here.

edited May 23 '17 at 11:59

Community

1
1

answered Nov 20 '15 at 09:15

dortonway

439
1
5
17

Fire callback when animation ends

1 Answers1