Multiple calls during hover/unhover on expandable div jQuery

0
votes

I have the following JSFiddle. There are a total of 10 stars representing a rating scale. I want to initially show only one star, after which when the user hovers over the star, the rating scale expands to show all stars. The user can then select his rating by clicking on the star he wants. When the mouse hovers out, the rating scale should collapse back to one star.

I have partially accomplished this with jQuery but it's buggy. Debugging on the console shows that the hover/unhover occurs fires more than once when trying to rate and results in the div expanding/collapsing in an endless loop. I have tried adding .stop() right before .animate() but this doesn't fix the problem and I can't seem to find what is causing it.

1
javascriptjqueryhtmlcss

1 Answers

1
votes

You just need to keep track of whether the stars are expanded, and only have the hover handler trigger when they're not. There are many ways to do this, for example:

$(function () {
    $('.rating-container .stars:not(.expanded)').hover(

    function () {
        $(this).addClass('expanded');
        // rest of your code as-is
    },

    function () {
        $(this).removeClass('expanded');
        // rest of your code as-is
    });
});