javascript - 彩色动画 jQuery 插件 : the animation triggers for both parent and child elements. 如何解决这个问题？

Question

就在昨天，我需要为 HTML div 的边框颜色设置动画，并从 bitstorm 找到了彩色动画 jquery 插件。 .它轻巧且易于使用，但似乎有一个错误。 我有以下 HTML:

<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);                                                       
        });

我还整理了一个 fiddle ，您可以在其中看到此行为:http://jsfiddle.net/2UKRG/2/

问题是，当我悬停任何内部元素时，事件处理程序也会为它们触发。我该如何解决这个问题？

Answer 1

我现在很懒，但我很确定你只需要将 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);                                                         
    });​