jQuery

Question

当用户更新数据库中的记录时，我将使用 AJAX 请求修改记录。然后，我通过调用 addClass 方法向呈现的 div 添加一个 class。 class 我添加（让我们调用 class colored）到 div 仅包含一个 background color 指令（以突出显示当前修改的记录）。

到目前为止一切顺利。

现在我想在 1 秒后删除具有 fadeOut 效果的 class。

我试过这些方法，但在这两种情况下，它不仅删除了 class，而且删除了整个 div。

$("#id1").fadeOut(1000, function() {
    $(this).removeClass('colored');
});

或

$("#id1").delay(1000).fadeOut().removeClass('updated_item');

为什么删除 div 而不是 class ？实际上，div 正在获得 display: none; 样式 - 我在控制台中看到了这一点。

Answer 1

您可以像这样使用 setTimeout 函数：

setTimeout(
    function(){
        $("#id1").removeClass('updated_item');      
    }
    ,1000 //1 second
)

如果您想使用动画更改颜色，您只需在 CSS 中添加过渡样式，如下所示：

.myDiv{
    background:red;
    transition:background 1s;
    -webkit-transition:background 1s;
}
.colored
{
    background:blue;
}

Answer 2

fadeOut 将淡出整个元素并将其隐藏在屏幕上。如果要淡出 class 的效果，可以使用 jQuery UI .removeClass() (which accepts a time duration and fade effect, unlike regular jQuery) or CSS3 transitions.

Answer 3

您正在将 fadeOut 函数应用于 div 本身，而不是 class:

//the div, will fadeout after 1000 ms and get the class removed
$("#id1").delay(1000).fadeOut().removeClass('updated_item');

如果你想删除带有淡化效果的 background-color，你必须使用类似的东西：

setTimeout(function() {
    $('#id1').removeClass('updated_item');
}, 1000)

在 css 方面，使用 transition 作为 fadeOut 效果：

#id1 {
    transition: background-color 0.5s ease;
}

.updated_item {
    background-color: yellow;
}

Fiddle

Answer 4

不知道我收到了没有，这是你想要的吗？ Fiddle

jQuery('.action').click(function() {
    jQuery(this).parent().addClass('highlight');
    if ( confirm('Are you sure?') ) {
        jQuery(this).parent().fadeOut(1000, function() {
            jQuery(this).addClass('remove').removeClass('highlight');
        });
    } else {
        jQuery(this).parent().removeClass('highlight');
    }
});

.highlight {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    #1 <a href="javascript:void(0);" class="action">Click me</a>
</div>
<div>
    #2 <a href="javascript:void(0);" class="action">Click me</a>
</div>

jQuery - 如何从具有给定延迟的元素中删除 class？

jQuery - how to remove a class from an element with a given delay?

javascript

fadeout