jQuery Animation Error on Cloned Elements

Question

Hi there,

In Firefox, this seems to be working fine - but Safari, Opera & Chrome all had issue. An error will be thrown by jQuery.ui (Line 3181) which controls the colour changing of elements, i.e. the "Highlight" effect.

This only happens when trying to clone and highlight the clone in the same action, i.e. $(targetStory).after(targetStory.clone().effect("highlight", {}, 1300));

This works fine in Firefox, but causes other browsers to grind to a halt - targetStory is simply the ID of the Element being cloned, and it needs to be cloned after that Element.

Has anyone come across this error before, and is there another solution to be able to easily animate the clone? Less lines the better.

Answer 1

What about:

 $(targetStory).clone().effect("highlight", {}, 1300)).insertAfter(targetStory);

Exact same thing, just different order. Not sure why FF is OK and the others are broken, though...

Answer 2

If the element you're cloning has an ID, you need to remove (or change) the ID of the clone before you put it back into the DOM. Try:

$(targetStory).clone().removeAttr('id').insertAfter(targetStory)
  .effect(...);