小编Pau*_*ner的帖子

我想使用CSS3颜色过渡将高亮淡化效果(黄色到透明)应用于使用JQuery附加到标记的新元素.

CSS

#content div {
    background-color:transparent;
    -moz-transition:background-color 2s;
    -webkit-transition:background-color 2s;
    -o-transition:background-color 2s;
    transition:background-color 2s;
}

#content div.new {
    background-color:yellow;
}

HTML

<div id="content"></div>
<a id="add-element" href="#">add new element</a>

JS

$('#add-element').click(function() {
    var newElement = $('<div class="new">new element</div>');
    $('#content').append(newElement);
    newElement.removeClass('new');
});

单击链接时,将创建新元素.它的类是"新"(背景颜色为黄色),它附加到HTML标记.我应该能够立即删除"新"类以触发背景颜色过渡到透明(或任何其他颜色).我显然做错了,因为新元素的背景颜色立即显示为透明,没有过渡效果.我知道我可以在JQuery UI中执行此操作,但我想使用CSS3过渡.

jsfiddle在这里:

http://jsfiddle.net/paulaner/fvv5q/