jQuery追加一个段落两次

时间:2012-05-07 07:18:12

标签: jquery

我正在创建一个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/

谢谢, 尤尼斯

5 个答案:

答案 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');
   }

); }