Ola pessoal, estou estudando jquery por conta própria  e to fazendo um efeito simples que é de quando passar o mouse sobre um elemento ele mude sua forma/cor etc, mas meu problema é o seguinte, se eu passo varias vezes o mouse em cima dele rápido e depois parar ele fica rodando o efeito sozinho, se eu passo 10 vezes o mouse rápido em cima do elemento ele fica rodando o efeito 10 vezes, teria como retirar isso?

 

Código:

$(document).ready(function(){
    $("#menu ul li").mouseover(function(){
        $(this).animate({
            backgroundColor: "#fff"
        }, 500);
    });
    $("#menu ul li").mouseout(function(){
        $(this).animate({
            backgroundColor: "#161616"
        });
    });
});

Rapaz pelo que conheço acho que não vem a ter como fazer isso, pois você definiu para passar e mudar de cor a cada vez, então se passar 10 vezes as 10 vezes ele vai mudar a não ser que você mude o código para deixar ativo só quando mouse estiver em cima do objeto... nesta parte já não sei a lógica não mexo muito bem com jquery.

a maior parte dos menus que vejo na internet se eu passar 10 vezes rapido o mouse em cima do elemento

ele so faz o efeito quando fico uns segundos encima 

Isso pode ser porque o seu navegador é lento... mas se você passar o mouse por cima do elemento 10x, é normal que o efeito ocorra 10x  ;)

Conseguiiiiii

 

adicionei o .stop() e tudo funfo

olha o codigo:

$(document).ready(function(){    
    $("#menu ul li").hover(function(){
        $(this).stop().animate({
            backgroundColor: "#fff"
        }, 300);
    });
    $("#menu ul li").mouseout(function(){
        $(this).animate({
            backgroundColor: "#161616"
        });
    });
});

mas agora to com otro problema .-., o efeito funciona formal quando eu coloco o mouse em cima do li se o mouse fica em cima da fonte que existe dentro o li o efeito para de aparecer, so funciona se o mouse estiver em cima do li teria como adicionar mais elementos no $("#menu ul li").hover(function(){ para que ele tb funcione se estiver em cima do #menu ul li a ?

Conseguiiiiii

 

adicionei o .stop() e tudo funfo

olha o codigo:

$(document).ready(function(){    
    $("#menu ul li").hover(function(){
        $(this).stop().animate({
            backgroundColor: "#fff"
        }, 300);
    });
    $("#menu ul li").mouseout(function(){
        $(this).animate({
            backgroundColor: "#161616"
        });
    });
});

mas agora to com otro problema .-., o efeito funciona formal quando eu coloco o mouse em cima do li se o mouse fica em cima da fonte que existe dentro o li o efeito para de aparecer, so funciona se o mouse estiver em cima do li teria como adicionar mais elementos no $("#menu ul li").hover(function(){ para que ele tb funcione se estiver em cima do #menu ul li a ?

Todas as sintaxes devem ser chamadas para que funcione.

Todas as sintaxes devem ser chamadas para que funcione.

como poderia fazer isso?

eu adicionei uma Class em todas as li e coloquei para aplicar o efeito na Class, mais sesmo assim sem resultados 

eu adicionei uma Class em todas as li e coloquei para aplicar o efeito na Class, mais sesmo assim sem resultados 

Posta eles em provedor free para que eu possa analisar melhor. Na prática consigo entender melhor o erro.

Posta eles em provedor free para que eu possa analisar melhor. Na prática consigo entender melhor o erro.

Nem precisa cara kkkkkkk, so muito jege, tava .hover simplesmente mudei para .mouseover e funcionou,

 

Mas tou com otro problema se vc passar de mais o mouse por cima varias vezes ele fica piscando sem parar ate dar a quantidade de vezes que vc passo o mouse veja: http://unikhost.com.br/menu/menu.html