Jquery changing background color on hover, keeps flashing

Question

so I'm currently making a toplist and I'd like to add a little javascript to it. I've decided to make a background color fade in when a visitor hovers their mouse over a name.

But the problem is, it keeps flashing in and out, which is quite annoying! - Here is my code:

<script type="text/javascript">
    var isOn = false;
    if(isOn == false) 
    {
        $('#rank<?= $info['ID']; ?>').hover(function(){
            isOn = true;
            $('#rank<?= $info['ID']; ?>').animate({
                backgroundColor: '#FF0000'
            }); 
        });
    }
    $('#rank<?= $info['ID']; ?>').mouseout(function(){
        isOn = false;
        $('#rank<?= $info['ID']; ?>').animate({
            backgroundColor: 'white'
        });
    });

</script>

I want to fade in to a color when a visitor hovers over the area, and change back to a different color when a visitor hovers out of the area.

Thank you.

Why don't you use `mouseOver` and `mouseOut` events – Harsha Venkataramu May 27 '13 at 19:58 — Harsha Venkataramu, May 27 '13 at 19:58
something like [this](http://jsfiddle.net/SpYk3/t84xa/)? – SpYk3HH May 27 '13 at 20:03 — SpYk3HH, May 27 '13 at 20:03

nullability · Accepted Answer · 2013-05-27T20:36:34.197

The problem is that you are using the hover shortcut incorrectly. hover actually takes two functions and binds to mouseenter and mouseleave. Your current code is binding to mouseenter and mouseout, which will cause problems.

What you actually want is this:

var isOn = false;
if(isOn == false) 
{
    $('#rank<?= $info['ID']; ?>').hover(function() {
        isOn = true;
        $('#rank<?= $info['ID']; ?>').animate({
            backgroundColor: '#FF0000'
        }); 
    },
    function() {
        isOn = false;
        $('#rank<?= $info['ID']; ?>').animate({
            backgroundColor: 'white'
        });
    });
}

You might also want to include some .stop() functions so you don't have a problem with your animation queue.

You should never use mouseover or mouseout because they fire multiple times when you enter or leave an element. See the demo at the bottom of http://api.jquery.com/mouseenter/ for an illustrative example.

Wow, I really do appreciate this! Thank you! But for the sake of me learning, can we just go through the code? You have added "}, function() {". That means when the .hover function has completed, that will trigger correct? Just being sure mate. — Dhamesh Makwana, May 28 '13 at 17:17
Yes, the first function is triggered on `mouseenter`, the second function is triggered on `mouseleave`. — nullability, May 28 '13 at 17:40

score 2 · Answer 2 · edited May 23 '17 at 11:43

2

You cannot animate colors using standard jQuery, you need additional scripts, EG: jQuery UI.

Also searching should have helped to fix this problem: https://stackoverflow.com/a/2302005/2373138

edited May 23 '17 at 11:43

Community

1
1

answered May 27 '13 at 19:58

kelunik

6,750
2
41
70

Have a look at this external resources ;) – kelunik May 27 '13 at 20:36
I meant edit something trivial, b/c I can't remove d/v without an edit – Nathan Koop May 28 '13 at 14:26
just so I could up vote you. If I downvote you, I cannot un-downvote b/c of the SO rules (http://meta.stackexchange.com/questions/70853/what-is-the-justification-for-locking-votes) so I need an edit to allow me to up vote you. Feel free to revert the change – Nathan Koop May 28 '13 at 14:41

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

Use CSS(3) check here

If you want to use JS, use a mouse-enter and -leave start/stop function.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 27 '13 at 20:29

Jonathan

8,771
4
41
78

score 0 · Answer 4 · answered May 27 '13 at 20:17

You must use the latest Jquery color plugin.

From api.jquery.com/animate/

...most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).

Jquery changing background color on hover, keeps flashing

4 Answers4