prevenire l'incatenamento degli eventi in jquery

[MrMarco]

date un occhiata a questo test

c'è un div centrale rosso bordeaux è registrato un evento hover: adottando la libraria jquery UI viene aggiunta e tolta una classe sull'evento (facendo spostare il div su e giù), il ritardo di 1000ms fa si che la transizione avvenga "gradualmente"

il punto è che se entrate e uscite col mouse più volte dal div rosso, gli eventi hover si incatenano, si mettono in coda, per cui il div continuerà a fare su e giù fin quando non li ha esauriti
la cosa ovviamente accade anche se all'evento hover sostituisco i due eventi mouseover e mouseout

$(".slide").mouseover(function(){
    $(this).addClass("slidemouseover",1000); 
});
$(".slide").mouseout(function(){
    $(this).removeClass("slidemouseover",1000); 
});

come risolvere questo problema?

[Xinod]

con jquery superiori a 1.7 e con normali animazioni, fadeIn, slideDown etc... basta un .stop() prima dell' animazione

a te vedere se funziona anche con addClass/removeClass di jquery UI

[MrMarco]

ottima indicazione, grazie xinod

dunque, ho fatto un po' di prove, .stop() ha due argomenti boleani: il primo se è true cancella tutte le animazioni che si incatenano (ed è quello che serve a me, quindi: true), il secondo argomento specifica se le proprietà css che vengono sottoposte ad animazione devono essere "congelate" sul valore che hanno quando il mouse viene spostato fuori (false) oppure passare al valore finale(true).
Per farla breve, se pongo true, l'aggiunta e la rimozione della classe avviene ma vi è l'eventualità che il primo movimento sia "brusco" nel momento in cui caccio il mouse dal div quando l'animazione è in corso (perchè, appuntuo passa al valore finale, aggiunge la classe al div tagliando fuori il timing);
se pongo false e caccio il mouse mentre l'animazione è in corso il div si congela nella posizione in cui si trova al mometno del movimento del mouse

la soluzione migliore è la prima ma è comunque antiestetica perchè poco fluida

$(".slide").hover(function(){
    $(this).stop(true, true).addClass("slidemouseover",1000);
    }, function(){
    $(this).stop(true, true).removeClass("slidemouseover",1000);
  });

è più difficile a parole che nei fatti

comunque il tutto è sostituibile con un semplice .animate()