Eu estou criando um site onde você passa o mouse sobre uma imagem e mostra um elemento (neste caso, expandindo sua altura de 0 a 154px).

<code>jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseover(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseout(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200);
    });
});
</code>

O conteúdo se expande quando o mouse entra e entra em colapso quando o mouse sai, mas toda vez que o mouse é movidodentro o elemento que o conteúdo expande e recolhe repetidamente até o mouse sair do elemento.

Eu nunca tive esse problema antes, e eu usei essas funções no passado, então eu não sei o que está acontecendo. Alguma ideia?

Editar:

<code>jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200);
    });
});
</code>

Agora estou usando o código acima e continuo recebendo exatamente o mesmo problema. Eu tentei todas as variações da função .stop (falso, falso) (falso, verdadeiro) (verdadeiro, falso) (verdadeiro, verdadeiro). O problema ocorre de maneira diferente em cada um deles, mas ainda ocorre.

EDIÇÃO FINAL:

O problema é que o conteúdo que o mouse percorreu foi coberto por conteúdo diferente assim que a função foi chamada. Portanto, a qualquer momento, o mouse estava entrando e saindo da imagem simultaneamente. Resolvido o problema, movendo a chamada de função para um elemento diferente.