jQuery-Problem: hover, un-hover funktioniert nicht

Question

Ich habe ein Problem. Dies ist meine Website http://keironlowe.x10hosting.com/ Die roten Linien, die sich in der Navigationsleiste bewegen, sind auf den unten stehenden Code zurückzuführen. Aber es funktioniert nicht wie beabsichtigt. Was ich will, ist, ist für die roten Linien zu bekommen länger auf schweben. Aber gehen Sie zurück auf normale Größe, wenn Sie den Cursor weg bewegen, aber das funktioniert nicht richtig, es funktioniert nur einmal und dann muss man aktualisieren, und es funktioniert nicht auf den Home-Link und es wird kleiner statt länger. Hilfe?

<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

Versuchen Sie anzurufen .stop() vor animate:

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

EDIT : Wenn Sie die Größe des Bildes und nicht die des DIV, in dem es enthalten ist, ändern möchten. Versuchen Sie dies:

$(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); 
     });
});

Möglicherweise müssen Sie die Breite und die Dauer anpassen, um den gewünschten Effekt zu erzielen.

Answer 2

Das ist leicht zu beheben, Kumpel.

schreiben Sie Folgendes in das Skript-Tag:

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

und schreiben Sie die folgende Markierung auf, und Ihr Schwebeflug sollte Sie anlächeln

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

Answer 3

Oops vergessen zu erwähnen; Schreiben mehrere Selektoren in Jquery ist wie

('Selektor1, Selektor2, ...')

die Sie fälschlicherweise wie geschrieben haben:

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

Ich hoffe, das hilft