我正在创建一个jquery动画,奇怪的是,当我追加一个新段落时,它会追加两次,只有在追加前两个段落时才会出现问题,可能这是一个jQuery错误..否则,我希望有人可以提供帮助我。
HTML:
<body>
<div id="element">
</div>
</body>
JavaScript:
$(function() {
animation();
});
function animation()
{
$('<p id="p1">paragraph 1</p>').appendTo('#element');
$('<p id="p2">paragraph 2</p>').appendTo('#element');
$('#p1, #p2').fadeOut(600, function(){
$('#p1, #p2').remove();
var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
});
}
问题在于“第3段”被附加了两次! 您可以在此处运行代码: http://jsfiddle.net/jonah13/QLM2s/
谢谢, 尤尼斯
最佳答案
我不知道为什么其他发现问题的答案被否决了,因为他们发现了问题。
这是修复它的代码。来自 jQuery docs 的注释,从 jQuery 1.6 开始(我假设您正在使用它,因为 jsFiddle 使用的是 1.7.2),您可以使用 .promise()
:
As of jQuery 1.6, the
.promise()
method can be used in conjunction with thedeferred.done()
method to execute a single callback for the animation as a whole when all matching elements have completed their animations.
我已经更新了你的 fiddle :
$(function() {
animation();
});
function animation()
{
$('<p id="p1">paragraph 1</p>').appendTo('#element');
$('<p id="p2">paragraph 2</p>').appendTo('#element');
$('#p1, #p2')
.fadeOut(600)
.promise().done(function() {
$('#p1, #p2').remove();
var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
});
}
关于jQuery 将一个段落追加两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10478167/