动画结束时触发回调

Question

我想在 div 消失后更改 div 中的文本，然后再次显示 div。问题是 'complete' 回调不会在第一个动画完成时触发。

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'transition'属性。解决方案是 here.

动画结束时触发回调

Fire callback when animation ends

javascript

jquery

animation

jquery-animate