Question

我希望在编辑时淡入/淡出行的背景。这是ajax帖子完成后的代码：

.done(function (data) {
    //animate row background colour
    var row = $('#tblTasks_' + data.JobId + ' tbody tr[data-id="' + data.TaskId + '"]');
    var bgcolour = $(row).css('backgroundColor');
    $(row).animate({
        "background-color": "#d9534f"
    }, 1500).delay(1000).animate({
        "background-color": bgcolour
    }, 1500);

这适用于没有类的行，但是表中的某些行可以标记为“completed”，在这种情况下我添加类“success”，bootstrap样式为我绿色，所以用户知道该行中的项目被标记为已完成。无论出于何种原因，此背景动画不适用于那些行。

我可以通过这种方式实现我想要的目标：

.done(function (data) {
    //animate row background colour
    var row = $('#tblTasks_' + data.JobId + ' tbody tr[data-id="' + data.TaskId + '"]');
    var hasClass = $(row).hasClass('success');
    $(row).removeClass('success');
    var bgcolour = $(row).css('backgroundColor');
    $(row).animate({
        "background-color": "#d9534f"
    }, 1500).delay(1000).animate({
        "background-color": bgcolour
    }, {
        duration: 1000,
        complete: function () {
            if (hasClass) $(row).addClass('success');
        }
    });
});

然而，它并不理想，因为它删除了类并将其重新添加后看起来有点不稳定。

为什么animate函数不能处理具有类的行？我的印象是内联样式应该覆盖类？有没有人对如何处理这个有更好的建议？

谢谢你，尼克

Answer 1

这是因为，当您将bootstrap“success”类应用于表中的行时，background属性实际上应用于其子项（td和th）而不是实际的“tr”。如果你用铬检查它，它应该是显而易见的。要解决此问题，您需要将'.children（）'添加到您的jquery目标中。

在您执行此操作的第一个区块代码中：

window.addEventListener("message", check_message, false);

function check_message(event){
    switch(event.data){
        case "showit":
            showIt();
            break;
        case "hideit":
            hideIt();
            break;
        default:
            breaks;
    }

会修复它。我创建了一个jsfiddle来演示这个。

请记住，在动画完成后，您的代码会将其保留为“bgcolor”，因此您必须更改$(row).children().animate....以检测bgcolor颜色，如我在的jsfiddle。

jQuery表行动画不会覆盖类样式

1 个答案: