[JQUERY] mouseover che rimbalza

[alemix]

Salve a tutti, non capisco come mai il mouseover di questo script rimbalza

<script type="text/javascript">           $(document).ready(function(){
            setTimeout($(".contentedizionecollection>.contenteboxedizionecollezione").mouseover( function(){
	       if ($(".contenenthoveredizionecollection").css("display")=="block"){
	       $(".contenenthoveredizionecollection").hide("fast");
	       }
               $("~ .contenenthoveredizionecollection",this).show("fast");
            }),5000);
	    $("body").click( function(){
               $(".contenenthoveredizionecollection").hide("fast");
            });
         });
      </script>

In poche parole nella mia logica dovrebbe funzionare così, se io vado sul div dovrebbe mostrarmi il div nascosto con Show, siccome ho più elementi, con l'if controllo che se ho delle classi con display:block allora chiude.

Ora di per se funziona, ma ho sti rimbalzi se apro sempre lo stesso (e da quando ho messo l'if ogni tanto alcuni rimangono aperti).

Come posso migliorare lo script?

[KillerWorm]

Ciao, sicuramente si può migliorare ma fammi capire alcune cose.
Non riesco a capire che senso ha quel setTimeout impostato così.

[alemix]

Ah mi sono dimenticato di toglierlo... ero in fase di prove ^^

Ma cosa ti serve sapere?

[KillerWorm]

Niente, era giusto quello che non mi tornava.

Il "rimbalzo" è generato dalle animazioni che sono in coda. Quando applichi più animazioni, in successione, ad uno stesso elemento (tipo hide o show) queste sono inserite nella coda per essere eseguite una dopo l'altra.
Per risolvere puoi cancellare la coda con la funzione stop().

$(document).ready(function(){
  $(".contentedizionecollection>.contenteboxedizionecollezione").mouseover(function(){
    $(".contenenthoveredizionecollection").stop(true).hide("fast")
    $("~ .contenenthoveredizionecollection",this).stop(true).show("fast");
  })
  $("body").click( function(){
     $(".contenenthoveredizionecollection").hide("fast");
  });
 });

[alemix]

Immaginavo fosse quello...

Ho provato a mettere il codice come me lo hai scritto, però non sembra funzionare benissimo, o meglio, funziona quando vuole lui.

Leggevo della funzione sulle Api di Jquery, però non capisco se faccia al caso mio. Se non ho capito male, in poche parole lui non fa partire l'animazione. Io passo il mouse sopra e blocca l'animazione sul nascere no?

Oltretutto l'ho provata anche in varie combinazioni, però sembra che dopo un po di usi anche in quella che è durata di più mi si impalli... ad un certo punto mi rimangono o tutti visibili o tutti nascosti ma senza più muoversi anche con il passaggio del mouse

[KillerWorm]

Leggevo della funzione sulle Api di Jquery, però non capisco se faccia al caso mio. Se non ho capito male, in poche parole lui non fa partire l'animazione. Io passo il mouse sopra e blocca l'animazione sul nascere no?

Se ti riferisci allo stop(), non è che non fa partire l'animazione, anzi interrompe tutte le eventuali animazioni presenti su quell'elemento ed elimina quelle che sono in coda. Per tale motivo, l'animazione che viene assegnata dopo lo stop, è libera di partire istantaneamente senza dover attendere il termine di eventuali altre animazioni in coda (perché non ce ne saranno più).

Ho provato a mettere il codice come me lo hai scritto, però non sembra funzionare benissimo, o meglio, funziona quando vuole lui.

Lo script funziona per quello che hai chiesto. Probabilmente stai sbagliando qualcosa nell'applicarlo o c'è qualcos'altro che influisce sul corretto funzionamento. Se hai altro script che magari agisce sugli eventi del mouse, verifica che non ci siano dei conflitti. Inoltre, verifica, attraverso la console web del tuo browser, che non ci siano errori nello script della pagina. Ancora, verifica col validatore online, che non ci siano errori di validazione sul codice html.

Se fai queste verifiche è ti sembra tutto in ordine, posta eventualmente un link alla tua pagina online così gli si può dare uno sguardo.

Intanto ti posto un esempio in cui ho applicato quello stesso script, il quale funziona perfettamente:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      .contenteboxedizionecollezione{width:600px;height:40px;background:silver;margin:2px 0}
      .contenenthoveredizionecollection{width:600px;height:60px;background:grey;color:white;display:none}
    </style>
      <script type="text/javascript">
        $(document).ready(function(){
          $(".contentedizionecollection>.contenteboxedizionecollezione").mouseover(function(){
            $(".contenenthoveredizionecollection").stop(true).hide("fast");
            $("~ .contenenthoveredizionecollection",this).stop(true).show("fast");
          })
          $("body").click( function(){
             $(".contenenthoveredizionecollection").hide("fast");
          });
         });
      </script>
  </head>
  <body>
    <div class="contentedizionecollection">
      <div class="contenteboxedizionecollezione">hover me</div>
      <div class="contenenthoveredizionecollection">
        contenenthoveredizionecollection 1
      </div>
    </div>
    <div class="contentedizionecollection">
      <div class="contenteboxedizionecollezione">hover me</div>
      <div class="contenenthoveredizionecollection">
        contenenthoveredizionecollection 2
      </div>
    </div>
    <div class="contentedizionecollection">
      <div class="contenteboxedizionecollezione">hover me</div>
      <div class="contenenthoveredizionecollection">
        contenenthoveredizionecollection 3
      </div>
    </div>
    <div class="contentedizionecollection">
      <div class="contenteboxedizionecollezione">hover me</div>
      <div class="contenenthoveredizionecollection">
        contenenthoveredizionecollection 4
      </div>
    </div>
  </body>
</html>