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 - 懸停後不工作

回答

相關問題