Question

我这里有一个需要大量DOM操作的任务。因为这会对性能产生不良影响，所以我克隆元素，在那里进行更改并用原始替换克隆。

更换后，元素具有悬停功能。

因为我想要褪色过渡，我会做这样的改变：

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

这是有效的，但之后悬停功能不再起作用。当我从fadeOut中删除回调时，我可以再次悬停，但定时转换看起来不再好看。

我该怎么办？使用回调时，为什么元素会丢失悬停功能？

Answer 1

我有一个不同的解决方案。 CSS方法：

您可以设置元素的一个位置;

#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);
    }
});

});

或者你可以使用appendTo()和remove()方法，我对这些方法并不熟悉，但试试这个：

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

Answer 2

克隆对象时，克隆将不再附加事件侦听器。修复它的一种方法是使用“on”附加事件处理程序：

$("my-clone-container").on("hover", "my-clone-selector", myHoverHandler);

这样，无论何时添加克隆，它都会根据您的需要自动处理悬停事件。请参阅docs for 'on'。

替换和fadeIn / fadeOut - 之后悬停不起作用

2 个答案: