使用动画设置后设置微调器的不透明度

Question

我在html中有一个引导程序微调器，我希望隐藏显示（稍有延迟以避免闪烁），然后在收到服务器的响应后将其隐藏。

基本声音。

我能够将不透明度更改为1，但将其重置为0不能按预期工作-尽管该元素的属性不透明度为0，但仍然可见。

spinnerElement = $(event.target).siblings(".spinner-border");

if (spinnerElement) {
  // display spinner element
  spinnerElement.delay(500).animate({ opacity: 1 }, 300);

}

// submit data via ajax
$.ajax({
  type: 'POST',
  url: url,
  data: { 'foo': 'bar' },
  success: function () {
    // Hide spinner
    if (spinnerElement) {
      spinnerElement.css({ opacity: 0 });
    }
    //  ... successful stuff
  },
  error: function (xhr) {
    //  ... unsuccessful stuff
    // Hide spinner
    if (spinnerElement) {
      console.log(spinnerElement.css('opacity')) // 1
      spinnerElement.css({ opacity: 0 });
      console.log(spinnerElement.css('opacity')) // 0
    }
  }
});

这些是元素上的属性。

为什么会这样？我想这与animate / delay属性有关，解决这个问题的正确方法是什么？

Answer 1

根据我的评论，您可以在应用新的CSS之前使用jQuery.stop()清除元素上所有正在进行的动画：

spinnerElement.stop().css({ opacity: 0 });