Question

In CSS I have several DIV items with hover effects. If I hover on an element the one element has another background color. If I hover over another item the previous selected item has the default background color without hovering.

How can I do this with jQuery? I want to animate the background color but want to disappear the fade (animate) effect with hovering on another item. I tried it with window timeout but after sliding the mouse pointer over a few elements everything is flickering and bugging.

This is the code I used for the animation effect on mouse over:

$('.entry').mouseover(function() {
 (this).animate({ backgroundColor: "#0F410E" }, { duration: 500, queue: false });
});

jQuery Colors plugin is installed 😉

Answer 1

You need to do something like this:

Please flick the code of jsfiddle I will take a look but try this:

I not sure what is the reason of using queue and duration I reckon you know :) hence you are using it.

Hope it help the cause.

var items = '.entry'
$(items).hover(function() {
    // Mouseover state
    $(this).animate({ backgroundColor: "#0F410E" }, { duration: 500, queue: false });
}, function() {
    // Mouseout state
    $(this).animate({ backgroundColor: "black" }, { duration: 500, queue: false });
});