在CSS转换返回已应用转换的元素之前克隆元素
在CSS转换返回已应用转换的元素之前克隆元素
提问于 2014-03-03 08:18:57
我要做的是在应用CSS3转换之前(在添加类之前)克隆一些元素。
在$(window).load()上，我克隆元素，然后添加应该启动转换的新类。
在用.remove()删除了前面的元素之后，我希望克隆包含原始元素，而没有转换效果，但这不是发生的事情。
<div id="parent">
<div class="start">
</div>
</div>
<input type="button" value="1- Remove Elements" id="remove"/>
<input type="button" value="2- Generate" id="generate" />CSS
.start {
background: blue;
-webkit-transition: background 4s;
-moz-transition: background 4s;
transition: background 4s;
}
.end {
background: red;
}jQuery
var clone = "";
$(window).load(function(){
clone = $("#parent").children("div");
$("#parent").children("div").addClass("end");
});
$("#remove").click(function(){
$("#parent").children("div").remove();
});
$("#generate").click(function(){
$("#parent").append(clone);
});我在这里举了一个完整的例子：
http://jsfiddle.net/Gv93G/
更新
在再次添加类之后，我错过了检查结果，它不像预期的那样工作，请查看这个http://jsfiddle.net/QeVF6/小提琴
取回克隆后，我添加类，然后立即应用转换。
我所需要的是应用这些转换，但不是瞬间，我希望在新附加的克隆上看到同样的4sec 效果.。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-03-03 08:24:53
使用clone = $("#parent").children("div")不会创建匹配元素的副本，而是将返回的列表存储到变量中。
为了创建匹配元素的副本，应该使用.clone()方法，如下所示：
clone = $("#parent").children("div").clone();更新演示。
更新
我的假设是，您不希望在克隆元素上应用转换。
如果要在元素之间设置延迟以触发转换，可以使用.queue()和.dequeue()方法，如下所示：
$("#generate").click(function() {
$("#parent").append(clone);
$("#parent").children("div").delay(4000).queue(function() {
$(this).addClass("end").dequeue(); // move to the next queue item
});
});工作演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22141758
复制相关文章
相似问题
腾讯云开发者
