CODEWITHSUNDEEP
jqueryhtmlcsshoverjquery-animate
thonixx
thonixx

Reputation: 346

jQuery - Multiple items with hover effect

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 ;)

Upvotes: 2

Views: 1675

Answers (2)

Tats_innit
Tats_innit

Reputation: 34107

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

Upvotes: 1

Ram
Ram

Reputation: 144669

for animating background-color of an element as jQuery natively doesn't animate the colors, you should use jQuery Color plugin.

This plugins installs a cssHook which allows jQuery's .animate()to animate between two colors.

Upvotes: 1

Related Questions