Question

This is the fiddle。有一个列表组。点击＆＃34;添加＆＃34;按钮弹出窗口会出现在＆＃34;创建＆＃34;按钮。点击＆＃34;创建＆＃34;按钮，样本列表项将添加到＆＃34;添加＆＃34;列表组中的按钮。

现在，我想要一些效果，以便用户可以了解添加创建的列表项的位置。所以，我想在附加元素中添加不同的颜色，并像fadeOut()一样平滑地消失不同的颜色。这就是为什么在添加时，我添加了一个名为.temp的新类，并将其设置为样式。因此，在添加＆＃34;创建列表＆＃34;后，它看起来不同。现在，我如何立即删除.temp课程（可能在2/3秒内）并顺利删除？

Answer 1

在2/3秒后删除它很容易：http://jsfiddle.net/TrueBlueAussie/hfof316a/3/

$('body').on('click', '.create-list', function () {
    var $element = $('<a href="#" class="list-group-item temp" data-toggle="modal" data-target="#listPopup"> Created List <span class="glyphicon glyphicon-remove-circle pull-right remove"></span> </a>');
    $('.add').before($element);
    setTimeout(function(){
        $element.removeClass("temp");
    }, 666);
});

您还需要在项目上设置转换（不是使用temp）：

http://jsfiddle.net/TrueBlueAussie/hfof316a/6/

Answer 2

一段时间后删除temp课程：

setTimeout(function () {
    $(".temp:first").removeClass("temp");
}, 1000);

并将list-group-item类的转换添加到temp类（因为它会在一段时间后被删除）。

.list-group-item {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

See updated fiddle here.

在附加元素中添加效果

2 个答案: