Question

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

到目前为止一切顺利。

现在我想在1秒后删除带有fadeOut效果的类。

我已尝试过这些方法，但在这两种情况下，它不仅要删除课程，还要删除整个div。

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

或

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

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

Answer 1

fadeOut会将整个元素淡出并将其隐藏在屏幕上。如果你想淡化类的效果，可以使用jQuery UI .removeClass()（它接受持续时间和淡入淡出效果，与常规jQuery不同）或CSS3 transitions。

Answer 2

您可以像这样使用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 3

您正在将fadeOut函数应用于div本身，而非应用于该类：

//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

＆＃13;

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');
    }
});

＆＃13;

.highlight {
    background-color: red;
}

＆＃13;

<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>

＆＃13;

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

4 个答案: