jQuery problema: hover, non-hover non funzionante

Question

Im che ha un problema. Questo è il mio sito http://keironlowe.x10hosting.com/ Le linee rosse che si muovono nella barra di navigazione è a causa di questo codice qui sotto. Ma la sua non funziona come previsto. Quello che voglio è è è per le linee rosse per ottenere più a lungo al passaggio del mouse. Ma tornare alle dimensioni normali quando si sposta il cursore lontano, ma thats non funziona correttamente, funziona solo una volta e poi si deve aggiornare, e non funziona sulla home link e diventa più piccolo, invece di più. Aiuto?

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('div', '#nav_container').hover(function() {
    $(this).animate({width: '220px'}, 1000);      
}, function() {
    $(this).animate({width: '300px'}, 1000); 
});
});
</script>

Answer 1

Prova a chiamare .Stop () prima animate:

$(document).ready(function() {
  $('div', '#nav_container').hover(function() {
    $(this).stop();
    $(this).animate({width: '220px'}, 1000);      
  }, function() {
    $(this).stop();
    $(this).animate({width: '300px'}, 1000); 
  });
});

Modifica Se si desidera ridimensionare l'immagine al posto del DIV in cui è contenuta. Prova questo:

$(document).ready(function() {
     $('#nav_container div').hover(function() {
        $(this).children('img').stop().animate({width: '220px'}, 1000);      
     }, function() {
        $(this).children('img').stop().animate({width: '300px'}, 1000); 
     });
});

Potrebbe essere necessario regolare la larghezza e la durata per ottenere l'effetto desiderato.

Answer 2

la sua facile da risolvere compagno.

scrivere quanto segue nel tag script:

$(document).ready(function() {
        $('.box').hover(
          function() {
              $(this).css({ background: 'blue' });
          },
          function() {
              $(this).css({ background: 'black' });
          }
        );
    });

e scrivere il seguente mark up e si dovrebbe avere il vostro hover sorridente a voi

<div class="box"></div>

Answer 3

oops dimenticato di dire; la scrittura più selettori in jQuery è come

( 'selettore1, selettore2, ...')

che avete erroneamente hai scritto come:

$ ( 'div', '#nav_container'). Hover (function () {....

Spero che questo aiuti