Question

I have a strange issue with jQuery’s hover, addClass

$(document).ready(function(){
    $('#selectable li').hover(
            function(){
                $(this).addClass('selecting', 600);
            },
            function(){
                $(this).removeClass('selecting', 800);
            }
    );

});

The strange is now that the selected element lights up twice. How can this be? What do I do to prevent two light ups?

Best Regards,
B. Kaiser

Answer 1

Try using an alternative such as this :

$('#selectable li').on('mouseenter',function(){
  $(this).addClass('selecting');
}).on('mouseleave',function(){
  $(this).removeClass('selecting');
});

_{You’ll need a current version of jQuery. ver 1.7+}

Not too sure that you are trying to accomplish with the numeric parameters in your addClass/removeClass calls. The jQuery documentation defines those functions as follows :

http://api.jquery.com/addClass/

.addClass( className )
classNameOne or more class names to be added to
the class attribute of each matched element.

.addClass( function(index, currentClass) )
function(index, currentClass)A function returning one or more space-separated class
names to be added to the existing class name(s). Receives the index
position of the element in the set and the existing class name(s) as
arguments. Within the function, this refers to the current element in
the set.

The removeClass() documentation works pretty much the same way too.