CSS3 Transition以突出显示在JQuery中创建的新元素 [英] CSS3 Transition to highlight new elements created in JQuery

问题描述

我想使用CSS3颜色过渡来为使用JQuery附加到标记的新元素应用高亮褪色效果（黄色到透明）。

I want to use a CSS3 color transition to apply a highlight-fading color effect (yellow to transparent) to new elements appended to the markup using 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');
});

点击链接时，将创建新元素。它的类是new（背景颜色为黄色），并附加到HTML标记。我应该能够立即删除新类，以触发背景颜色过渡到透明（或任何其他颜色）。我显然做错了，因为新元素的背景颜色立即显示为透明，没有过渡效果。
我知道我可以在JQuery UI中这样做，但我想使用CSS3转换。

When I click the link, the new element is created. Its class is "new" (background color yellow) and it's appended to the HTML markup. I should be able to immediately remove the "new" class to trigger the background color transition to transparent (or whatever other color). I'm obviously doing it wrong, since the background color of the new element is immediately shown as transparent, with no transition effect. I know I can do this in JQuery UI, but I'd like to use CSS3 transitions.

jsfiddle这里：

jsfiddle here:

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

推荐答案

我能够使用css3动画：

@-webkit-keyframes yellow-fade {   
   0% {background: yellow;}
   100% {background: none;}
}

@keyframes yellow-fade {
   0% {background: yellow;}
   100% {background: none;}
}

.highlight {
   -webkit-animation: yellow-fade 2s ease-in 1;
   animation: yellow-fade 2s ease-in 1;
}

只需将突出显示类应用到新元素：

$('#add-element').click(function() {

    var newElement = $('<div class="highlight">new element</div>');

    $('#content').append(newElement);

});

我在IE 10，Chrome，Safari和最新的FF测试，并在那里工作。可能不工作在IE 9及以下...

I tested in IE 10, Chrome, Safari, and latest FF and it works there. Probably wont work in IE 9 and below...

http://jsfiddle.net/nprather/WKSrV/3/

我在Safari在线图书中有这个方法：
http://bit.ly/11iVv4M

I got this method from this book in Safari Books Online: http://bit.ly/11iVv4M

这篇关于CSS3 Transition以突出显示在JQuery中创建的新元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！