Цветная анимация Плагин jQuery: анимация запускает как родительские, так и дочерние элементы. Как это исправить?

Question

Только вчера мне нужно было анимировать цвет рамки HTML div и наткнулся на плагин цветной анимации jquery от bitstorm. Он легкий и простой в использовании, но, похоже, в нем есть ошибка. У меня есть следующий кусок 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);                                                       
        });

Я также собрал скрипку, где вы можете увидеть это поведение: 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);                                                         
    });​

Answer 2

Вы также можете попробовать изменить его на hover вместо этого - http://jsfiddle.net/WJE2y/

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

Что касается "почему" - ответ "В чем разница между событиями mouseover и mouseenter? объясняет это довольно хорошо и ссылки на http://docs.jquery.com/Events/mouseover