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

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