Color animation jQuery plugin: the animation triggers for both parent and child elements. How to fix this?

Question

Only yesterday did I need to animate the border color of an HTML div and came across the color animation jquery plugin from bitstorm. It is lightweight and simple to use, but it seems that it has a bug. I have the following piece of 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>

where there's some space (in pixels) between the inner elements and the border of the parent element. Additionally, I've added two event handlers for the mouseover and mouseout events, attached to the object-list-item element like so:

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

I also put together a fiddle where you can see this behavior: http://jsfiddle.net/2UKRG/2/

The problem is that when I hover any of the inner elements, the event handler triggers for them as well. How can I fix this?

Answer 1

I'm lazy right now but is pretty sure you just have to change mouseover, mouseout to 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);                                                         
    });​

Answer 2

You could also try changing it to hover instead - http://jsfiddle.net/WJE2y/

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

As for the 'why' - the answer for What is the difference between the mouseover and mouseenter events? explains it quite well and links to http://docs.jquery.com/Events/mouseover