Question

我显示了一个表格行，应该突出显示一小段时间。为此，我使用jQuery UI functions：

获得了这段代码

$('tr#' + currentlyAdded).addClass("highlighted", 600, "easeInQuad", function () {
    $('tr#' + currentlyAdded).removeClass("highlighted", 1500, "linear");
});

所以我使用指定的缓动添加了类highlighted，这非常合适。之后我希望用这样的动画删除这个类，但是无论我指定哪个时间或缓和，它都会消失。在代码的其他地方，我测试了removeClass()的功能，它似乎通常像我期望的那样工作。

在addClass的回调中使用removeClass是否存在问题或导致此问题的原因是什么？

编辑：表格结构：

<div class="jumbotron content">
    <div class="row ">
        <div class="col-md-8 col-xs-12" id="no-more-tables">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Vorname</th>
                        <th>Nr.</th>
                        <th>Aktionen</th>
                    </tr>
                </thead>
                <tbody id="emp_table">
                    <tr id="8b08e40a-0e59-47e7-bb05-fa6626e998d8" onclick="onListClick(this,id);">
                        <td><img src="/Content/pic/Person1.jpg" width="64"></td>
                        <td data-title="Name">Name</td>
                        <td data-title="Vorname">Vorname</td>
                        <td data-title="Nr.">000013</td>
                        <td data-title="Aktionen"> <input id="0" class="fb8" type="button" value="Edit" onclick="showDetails(id);"> </td>
                    </tr>

正如你可能看到我在这里使用bootstrap。所以我指定的只有css：

highlighted上课：

.highlighted{
    background-color:#fe9a2e!important;
}

在此处使用重要内容，因为jumbotron类会覆盖我的tr。

编辑2：

我创建了一个小提琴来重现错误但不知何故它在这里有效。所以我发现有人编辑了bootstrap.min.css文件，因此这些样式就像jumbotron中的不同行颜色一样出现奇数和偶数。但知道这一点我仍然无法弄清楚为什么这不起作用。我还尝试在没有jumbotron课程的情况下测试这个，但仍然没有成功。

编辑3： 最后得到了问题：因为我在我的班级使用!important，所以jQuery的动画永远不可见。在removeClass()函数工作时检查HTML，我可以看到它将style="background-color:rgb(..)"添加到由于类而没有效果的行。

Answer 1

正如我的编辑所述，问题的答案如下：

当您尝试为标有!important的CSS属性设置动画时，jQuery的动画实际上正在发生但不可见。因此删除!important部分将解决此问题。

Answer 2

不知道更多我不会完全知道，但我想知道currentlyAdded变量的潜力是否会在某处变得混乱？

可能会将您的代码更改为此，看看它是否有更好的结果？

$('tr#' + currentlyAdded).addClass("highlighted", 600, "easeInQuad", function () {
    $(this).removeClass("highlighted", 1500, "linear");
});

在回调中使用$(this)应该有希望将已突出显示类的元素作为目标，即使变量以某种方式更改

jQuery UI removeClass不显示动画

2 个答案: