jQuery color plugin: onMouseOver animation causes flickering in FF3.5.5

Question

I'm trying to change the background color of a div on mouseover and mouseout. Instant change to yellow on MouseOver, and slow fade on MouseOut.

function hilightel(keydiv)
{
$('#'+keydiv).animate({ backgroundColor: '#ffffd3' },1);
}
function lolightel(keydiv)
{
$('#'+keydiv).animate({ backgroundColor: '#ffffff' },300);
}

< div onMouseOver=javascript:highlightel('item1'); onMouseOut=javascript:lolightel('item1'); id='item1'>CONTENT< /div>

When the mouse moves over text within the div, though, it thinks I've moused-out and so flickers badly.

Alternatives that don't work:
- animateToClass doesn't support background-color so I'm using the 'color' plugin
- I hear that switchClass doesn't work in Chrome
- Can't use .hover because their will be dynamically named divs in the page so need a general function

Thanks in advance...

Answer 1

Why not simply assign the div(s) a class, and then use .hover to target them?

EDIT

Try this:

$(".myclass").hover(
function(){
    $(this).animate({ backgroundColor: '#ffffd3' },1);
    },
    $(this).animate({ backgroundColor: '#ffffff' },300);
    }
);

Answer 2

Final solution:

$(document).ready(function()
{
$('.a_editableitem').bind('mouseenter', function() { $(this).animate({ backgroundColor: '#ffffd3' },25); });
$('.a_editableitem').bind('mouseleave', function() { $(this).animate({ backgroundColor: '#ffffff' },250); });
});

Flickering has stopped although still gets 'stuck' on yellow sometimes.

Answer 3

mouseenter / mouseleave helped me solving the background images flickering problems. Thanks buddy!