用于值更新的视觉反馈

Visual feedback for value update

本文关键字：视觉 更新 用于      更新时间：2023-09-26

我在表格中有contenteditable td个元素。我正在使用引导和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 动画，但主要是我不知道如何获得"flash"类型的效果(我认为也许keyframes会有所帮助，但我不知道如何使用它们，更不用说它们的浏览器兼容性了(。

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

更新多亏了@chiliNUT我正在删除类以获取颜色，但问题是 jquery 的 animate 已经设置了元素的样式，因此悬停在修改后的单元格上被破坏了。所以现在我也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");
        }
      });
    }
  });

您可以在悬停效果执行显示更新时将其删除，然后在显示更新完成后恢复它。你可以用$(element).closest('table')获取包含 td 的表元素，然后用 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
相关文章：