Home/ Questions/Q 7898165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T08:21:35+00:00

I’m creating a jquery animation and weirdly, when I append a new paragraph, it

  • 0

I’m creating a jquery animation and weirdly, when I append a new paragraph, it appends it twice, the problem only happens when 2 previous paragraphs are appended, probably that’s a jQuery bug.. otherwise, I hope someone can help me.

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

The problem is with “paragraph 3” that is appended twice!
You can run the code here:
http://jsfiddle.net/jonah13/QLM2s/

Thanks,
Younes

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t know why other answers that identified the problem were down-voted, since they identified the problem.

    Here is the code to fix it. Note from the jQuery docs, that as of jQuery 1.6 (which I assume you’re using since the jsFiddle was using 1.7.2) you can use .promise():

    As of jQuery 1.6, the .promise() method can be used in conjunction with the deferred.done() method to execute a single callback for the animation as a whole when all matching elements have completed their animations.

    I’ve updated your 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');
   });         
}​
    • 0