Question

I have a task here that requires heavy DOM manipulation. Because this can have a bad impact on the performance, I clone the element, make the changes there and replace the clone with the original.

After replacement, the elements have a hover function.

Because I want faded transition, I do the change like this:

myElement.fadeOut(500, function(){
    myClone.hide();
    myElement.replaceWith(myClone);
    myClone.fadeIn(500);
 });

This is working, but after that the hover functionality does not work anymore. When I remove the callback from fadeOut, I can hover again but the timed transitions does not look good anymore.

What can I do about it? Why do the elements lose their hover-functionality when using the callback?

Answer 1

i have a different solution for you. CSS approach:

You can set one of your element’s position;

#myElement { top:100px; left:200px; }
#myElement, #myClone { position:absolute; }

jQuery:

$(document).ready(function() {

var myElement = $('#myElement');
var myClone = $('#myClone');

var myEleTop = parseInt(myElement.css('top'));
var myEleLeft = parseInt(myElement.css('left'));

myClone.hide();
myClone.css({'top':myEleTop+'px','left':myEleLeft+'px'});//sets position here

myElement.mouseenter(function() {
    myElement.fadeOut(500, function(){
      myClone.fadeIn(500);
    }
});
myElement.mouseleave(function() {
    myClone.fadeOut(500, function(){
      myElement.fadeIn(500);
    }
});

});

or you can just use appendTo() and remove() methods, i am not really experienced with these methods but try this:

myElement.mouseenter(function() {
    myElement.fadeOut(500, function(){
      myElement.remove();
      myClone.appendTo($('.container'));
      myClone.fadeIn(500);
    }
});
myElement.mouseleave(function() {
    myClone.fadeOut(500, function(){
      myClone.remove();
      myElement.appendTo($('.container'));
      myElement.fadeIn(500);
    }
});