动画结束时的火回调

Question

我想在div消失之后更改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。