我正在创建一个jquery动画,奇怪的是,当我追加一个新的段落时,它会将它追加两次,问题只发生在附加2个前面的段落时,可能这是一个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/
谢谢, 尤尼斯
答案 0 :(得分:6)
我不知道为什么其他确定问题的答案被低估了,因为他们发现了问题。
以下是修复它的代码。请注意jQuery docs,从jQuery 1.6开始(我假设您使用的是jsFiddle使用的是1.7.2),您可以使用.promise()
:
从jQuery 1.6开始,
.promise()
方法可以与deferred.done()
方法结合使用,在所有匹配元素完成动画时,为整个动画执行单个回调。
我已经更新了你的小提琴:
$(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');
});
}
答案 1 :(得分:5)
每个与选择器匹配的元素会触发向fadeOut()
提供的函数。由于选择器返回两个元素,因此它会被触发两次,因此会附加两个段落。
此处修改示例:http://jsfiddle.net/QLM2s/1/
答案 2 :(得分:2)
问题在于淡出第1段和第2段:jQuery正在为你给它的每个选择器执行淡出函数内的代码(在这种情况下,两个段落,所以两个附加)。
答案 3 :(得分:1)
由于fadeout()触发两次更好,因此在追加div之前清空段落。
尝试以下代码:
$(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(){
$('p').empty();
var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
});
}
答案 4 :(得分:-1)
这似乎工作正常
$(function() {
animation();
});
function animation()
{
$('<p id="p1">paragraph 1</p>').appendTo('#element');
$('<p id="p2">paragraph 2</p>').appendTo('#element');
$('#p1').fadeOut(600, function(){
$('#p1').fadeOut();
$('#p1, #p2').remove();
var $p3 = $('<p>paragraph 3 </p>').appendTo('#element');
}
); }