在没有-UI或插件的情况下使用jQuery淡化背景颜色的最简单方法是什么

Question

我正在使用 Bootstrap 3 并且有一个我正在使用的带有 Edit-in-Place 功能的表，并且希望能够淡出上下文表类（tr.success、tr.danger 等）并拥有一直在到处寻找做这样的事情而不将 jQuery-UI 添加到我的项目中，因为 jQ-UI 在没有一些额外的腿部工作的情况下不能很好地与 Boostrap 配合使用。

唯一的另一种选择似乎是使用带有$.animate() 的jQuery Colors 插件，但这会改变CSS 并与交替的表格行颜色混淆。

我需要能够在不直接修改 CSS 和不使用 jQUery UI 或其他插件的情况下慢慢淡出上下文表行类，因为它们都不能完全满足我的特定需求。

Answer 1

我发现做到这一点的最简单方法（在昨天花了很多时间搜索但运气不佳之后）是使用 LESS 和 Bootstrap 3 .table-row-variant() mixin。

为此，我使用的是特定于 Bootstrap 3 的解决方案，但是修改它以在其他地方使用应该一点也不困难。

在 Bootstrap LESS 文件夹中，打开 mixins.less 并搜索 .table-row-variant()，然后添加以下内容：

// Generate Classes to Fade-off contextual table classes
.table-row-variant-fade(@state; @background) {

  .state-fade(@fade-value; @state; @background) when (@fade-value =< 10) {
    .table > thead > tr,
    .table > tbody > tr,
    .table > tfoot > tr {
      > td.@{state}-fade-@{fade-value},
      > th.@{state}-fade-@{fade-value},
      &.@{state}-fade-@{fade-value} > td,
      &.@{state}-fade-@{fade-value} > th {
        background-color: lighten(@background, unit(@fade-value, '%'));
      }
    }

    // Hover states for `.table-hover`
    // Note: this is not available for cells or rows within `thead` or `tfoot`.
    .table-hover > tbody > tr {
      > td.@{state}-fade-@{fade-value}:hover,
      > th.@{state}-fade-@{fade-value}:hover,
      &.@{state}-fade-@{fade-value}:hover > td,
      &.@{state}-fade-@{fade-value}:hover > th {
        background-color: darken(lighten(@background, unit(@fade-value, '%')), 5%);
      }
    }

    .state-fade((@fade-value + 1); @state; @background;);
  }

  .state-fade(1; @state; @background;);
}

这将允许我们生成 10 个类（例如 .CONTEXT-fade-N），我们可以使用 jQuery 循环访问它们。

接下来，我们实际上需要生成类。保存mixins.less并打开tables.less并搜索.table-row-variant()，在最后一个变体mixin调用之后，添加以下内容，保存并关闭：

.table-row-variant-fade(success; @state-success-bg);
.table-row-variant-fade(info; @state-info-bg);
.table-row-variant-fade(warning; @state-warning-bg);
.table-row-variant-fade(danger; @state-danger-bg);

现在我们有一堆额外的表变量类，它们可以让我们淡出上下文背景颜色。 （注意，我们不会触及文本颜色）（另请注意，您可以选择只为您需要/想要消失的上下文类创建褪色变体）

现在我们需要一些 jQuery。

假设我们有一行，有一些单元格，还有一个带有 save 类的按钮，它触发我们保存记录。

<tr>
    <td>foo</td>
    <td>bar</td>
    <td> <button class="btn btn-primary save">Save Record</button></td>
</tr>

在我们的 Save click 事件处理程序中，当我们想要高亮保存的行，然后淡出高亮时，我们使用 setTimeout() 和 jQuery 的偶数触发系统来完成此操作。下面，我们应用 success 上下文类，添加几个 data-* 属性来告诉事件处理程序我们正在执行的淡入淡出，我们将第一个淡入淡出刻度设置为在 1.5 秒后发生（您可以根据需要调整它）喜欢）。

$('tbody').on('click', '.save', function(){

    var $this = $(this).button('loading');
    var $target = $($this.data('target'));

    $.ajax({
        type: 'POST',
        url: 'index.php',
        dataType: 'json',
        data: {},
        success: function(response) {

            $target.data('fade-state', 'success')
                .data('fade-val', 1)
                .addClass('success');

            setTimeout(function(){
                $target.trigger('doFade');
            }, 1500);

        },
        error: function(jqXHR, textStatus, errorThrown) {
            // ...
        }

    }).always(function() {
        $this.button('reset');
    });

});

魔法！： 在这里，我们只是添加和删除淡入淡出的上下文类（以及删除原始的上下文类变体），并更新data-fade-val 属性以跟踪我们当前的淡入淡出步骤。

$('tbody').on('doFade', 'tr', function(){
    var $this = $(this);

    var fadeState = $this.data('fade-state');
    var fadeVal = parseInt($this.data('fade-val'));

    $this.removeClass(fadeState + ' ' + fadeState + '-fade-' + (fadeVal - 1)).addClass(fadeState + '-fade-' + fadeVal);

    $this.data('fadeVal', ++fadeVal);

    if(fadeVal <= 10) {
        setTimeout(function(){
            $this.trigger('doFade');
        }, 100);
    } else {
        $this.removeClass(fadeState + '-fade-' + (fadeVal - 1));
    }

});

以这种方式淡出类的好处是不涉及 CSS，并且可以非常简单地更新我们的主题，而无需深入 JS 文件进行调整。而且因为我们没有接触 CSS，所以我们可以很好地使用 BootStrap（特别是在这个实例中是 Bootstrap Tables），而且我们不必担心动画完成后会弄乱 bootstrap 主题，因为我们只需删除 final CSS 类，我们无需任何额外清理即可恢复正常。