1

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

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

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

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

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

我能做些什么呢？为什么使用回调时元素会失去悬停功能？

4

2 回答 2

2

我有一个不同的解决方案给你。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);
    }
});
于 2012-07-18T12:05:40.573 回答
1

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

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

这样，每当您添加克隆时，它都会自动处理您想要的悬停事件。请参阅'on' 的文档。

于 2012-07-18T12:29:47.380 回答