1

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?

Andrei Oniga
  • 8,219
  • 15
  • 52
  • 89

2 Answers2

2

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);                                                         
    });​
Andreas Louv
  • 46,145
  • 13
  • 104
  • 123
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

Community
  • 1
  • 1
boz
  • 4,891
  • 5
  • 41
  • 68
  • OK...Both your and Andreas' suggestions seem to work (at least in Chrome), but why?! It doesn't make any sense to me and it's just horrifyingly weird to me. – Andrei Oniga Oct 05 '12 at 13:53
  • Hmmm, now that that's fixed, this actually generates a new problem: When I hover the child elements, the border changes back, as if I've hovered away from the parent element. This doesn't need to happen, the border should remain dark until the user leaves the parent element altogether, but not sooner than that. Do you have any idea how to fix this? – Andrei Oniga Oct 05 '12 at 14:53
  • Both the fiddle in the answer and my one don't fade the border until you hover out of the parent. Have I missed something? – boz Oct 05 '12 at 14:56
  • Indeed, but I need to use the `on()` method in order to bind the handler to newly added elements. How do I get around the current problem by using `on()`? – Andrei Oniga Oct 05 '12 at 15:56
  • http://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover - apparently not :( – boz Oct 05 '12 at 16:05
  • Ah, never mind. It was my mistake, I didn't realize I hadn't swapped `mouseout` with `mouseleave`, so I was using this combination: `$(document).on("mouseenter", "div.object-list-item", function(){}).on("mouseout", "div.object-list-item", function(){});`, which made the behavior very strange. Anyway, thanks again for the earlier clarifications. Best wishes! – Andrei Oniga Oct 05 '12 at 18:48