replaceWith&fadeIn/fadeOut-悬停后无法工作

replaceWith & fadeIn/fadeOut - hover not working afterwards

本文关键字：悬停 工作 fadeOut- amp fadeIn replaceWith      更新时间：2023-11-17

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

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

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

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

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

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

我有一个不同的解决方案。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);
    }
});

当一个对象被克隆时，克隆将不再具有附加到它的事件侦听器。修复它的一种方法是使用"on"附加事件处理程序：

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

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

相关文章：