Question

我在表格中有contenteditable td个元素。我正在使用bootstrap和table-hover（所以当你将鼠标悬停在一行上时颜色会发生变化。在模糊td时我会做一个更新服务器上的值的ajax请求然后我得到一个响应表示成功或错误。成功后我想表明该值已成功更新。现在我正在这样做：

var trueColor;
trueColor = $(element).css('backgroundColor');
$(element).animate({
  backgroundColor: '#cce2ff'
}, {
  duration: 100,
  complete: function() {
    $(element).delay(10).animate({
      backgroundColor: trueColor
    }, {
      duration: 900
    });
  }
});

所以我正在使用第一个动画的完整回调将颜色恢复到我想要的颜色。代码可以工作，但问题很明显，如果你在设置trueColor时将鼠标悬停在元素上。我曾经想过使用css动画，但主要的是我不知道如何获得“闪光”效果（我想也许keyframes会有所帮助，但我不知道如何使用它们更不用说他们的浏览器兼容性了。）

所以问题基本上是如何实现这种效果的？我不介意它是css还是javascript，如果你认为有更好的方式向用户提供这种视觉反馈，我会欢迎更好的建议。

更新感谢@chiliNUT我正在移除类以获得颜色，但问题是jquery的动画已经设置了元素，因此在修改的单元格上打破了悬停。所以现在我也removeAttr("style")在我们完成后摆脱它

  var trueColor;
  $(el).closest('table').removeClass('table-hover');
  trueColor = $(el).css('backgroundColor');
  $(el).closest('table').addClass('table-hover');
  $(el).animate({
    backgroundColor: '#cce2ff'
  }, {
    duration: 100,
    complete: function() {
      $(el).delay(10).animate({
        backgroundColor: trueColor
      }, {
        duration: 900,
        complete: function() {
          return $(el).removeAttr("style");
        }
      });
    }
  });

Answer 1

您可以在执行显示更新时删除悬停效果，然后在显示更新完成后将其还原。您可以使用$(element).closest('table')获取包含td的table元素，然后使用removeClass('table-hover')删除悬停效果，然后将其与addClass('table-hover')一起放回，这样

var trueColor;
//remove hover
$(element).closest('table').removeClass('table-hover');
//get original color
trueColor = $(element).css('backgroundColor');
//restore hover
$(element).closest('table').addClass('table-hover');
//..rest of your original code

价值更新的视觉反馈

1 个答案: