顏色動畫jQuery插件：父元素和子元素的動畫觸發器。如何解決這個問題？

只有昨天我需要動畫HTML div的邊框顏色，並從bitstorm遇到彩色動畫jquery插件。它重量輕，易於使用，但它似乎有一個bug。我有以下片HTML的：顏色動畫jQuery插件：父元素和子元素的動畫觸發器。如何解決這個問題？

<div class="object-list-item" id="oli-0" reference="0"> 
    <div class="close_btn" tooltip_text="Remove this object"></div> 
    <img class="thumb" src="img/text-icon.png" /> 
    <div class="text-preview"></div> 
    <div class="clear"></div> 
</div>

那裏的內部元件和母元件的邊界之間的一些空間（像素）。此外，我已經添加了兩個事件處理程序mouseover和mouseout事件，附着在object-list-item元素，像這樣：

$(document) 
     .on("mouseover", "div.object-list-item", function(){ 
      $(this).animate({ borderColor : "#555" },300);              
     }) 
     .on("mouseout", "div.object-list-item", function(){ 
      $(this).animate({ borderColor : "#ddd" },300);              
     });

我也把一個小提琴在這裏你可以看到此行爲：http://jsfiddle.net/2UKRG/2/

問題是，當我懸停任何內部元素時，事件處理程序也觸發它們。我怎樣才能解決這個問題？

來源

2012-10-05 Andrei Oniga

我很懶，但現在是很肯定你只需要改變mouseover, mouseout到mouseenter, mouseleave：

http://jsfiddle.net/2UKRG/3/

$(document) 
    .on("mouseenter", "div.object-list-item", function(){ 
     $(this).animate({ borderColor : "#555" },300);               
    }) 
    .on("mouseleave", "div.object-list-item", function(){ 
     $(this).animate({ borderColor : "#ddd" },300);               
    });

來源

2012-10-05 13:46:25 andlrc

這只是......奇怪......它確實解決了這個問題，但是爲什麼？這對我沒有任何意義。 –

@AndreiOniga再次懶惰，但你可以在這裏找到答案：http://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover – andlrc

您也可以嘗試將其更改爲hover代替 - http://jsfiddle.net/WJE2y/

$('div.object-list-item').hover(function(){ 
    $(this).animate({ borderColor : "#555" },300); 
}, function(){ 
    $(this).animate({ borderColor : "#ddd" },300); 
});

至於'爲什麼' - What is the difference between the mouseover and mouseenter events?的答案解釋得很好，並鏈接到http://docs.jquery.com/Events/mouseover

來源

2012-10-05 13:51:28 boz

好吧...你和Andreas的建議似乎工作（至少在Chrome），但爲什麼？這對我來說沒有任何意義，對我來說這簡直太可怕了。 –

我現在看到了，感謝您的鏈接！我從來不知道這一點。 –

不用擔心。很高興幫助。 – boz

顏色動畫jQuery插件：父元素和子元素的動畫觸發器。如何解決這個問題？

回答

相關問題