replaceWith＆fadeIn/fadeOut - 悬停后不工作

我在这里有一个任务，需要沉重的DOM操作。因为这可能会对性能产生不利影响，所以我克隆了元素，在那里进行了更改并将克隆替换为原始文件。replaceWith＆fadeIn/fadeOut - 悬停后不工作

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

因为我想褪色的过渡，我喜欢这样的变化：

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

这是工作，但经过悬停功能不工作了。当我从fadeOut中删除回调时，我可以再次悬停，但定时转换看起来不再好。

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

来源

2012-07-18 Sven

其中myClone的var声明？什么是myClone？ HREF？ ID？类？ – 2012-07-18 11:53:33

我们可以看到代码的悬停部分吗？我听起来像'.live（）'：http://api.jquery.com/live/可能是解决方案。 – Steeven 2012-07-18 11:54:35

'.clone（）'函数默认情况下不会复制事件处理程序和附加到元素的数据。 – 2012-07-18 11:55:04

我对你有不同的解决方案。 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-18 12:05:40

这真的很好，再次;-)谢谢！ – Sven 2012-07-18 12:57:53

很高兴我可以帮助:)喜欢你的问题顺便说一句，他们都包括我的兴趣（（ – 2012-07-18 13:01:00

抱歉干扰你的解决方案，但我有一个克隆的元素相同的问题，我不能处理mouseenter/mouseleave正确。请看看我的问题了解更多详情http://stackoverflow.com/questions/11768145/problems-with-my-attempt-to-bypass-jscrollpanel-overflow-auto – pasine 2012-08-02 06:07:11

当一个对象被克隆，克隆将不再拥有附加的事件监听器。解决它的方法之一是使用附加“的”事件处理程序：

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

这样，当你添加一个克隆，它会自动地处理，因为你希望它悬停事件。请参阅docs for 'on'。

来源

2012-07-18 12:29:47 tucuxi

replaceWith＆fadeIn/fadeOut - 悬停后不工作

回答

相关问题