jQuery Problem: Hover, un-schweben nicht funktioniert

Question

mit Im ein Problem. Dies ist meine Website http://keironlowe.x10hosting.com/ Die roten Linien, die in der Navigationsleiste bewegen sind unter diesem Code fällig. Aber seine Arbeit nicht wie beabsichtigt. Was ich will, ist, ist für die roten Linien länger auf schweben zu bekommen. Aber gehen Sie zurück zur normalen Größe, wenn Sie den Cursor weg bewegen, aber das ist nicht richtig funktioniert, es funktioniert nur einmal und dann müssen Sie aktualisieren, und es funktioniert nicht auf dem Home-Link funktioniert 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 .stop () vor belebtes:

$(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 das Bild anstelle des DIV, um die Größe wollen, wo es enthalten ist. Versuchen Sie folgendes:

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

Sie müssen die Breiten und die Dauer einzustellen gewünschten Effekt zu erhalten.

Answer 2

seine leicht zu beheben paaren.

Das ist wie folgt im Skript-Tag:

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

und schreiben Sie die folgende Marke und Sie sollten Ihre Hover haben lächeln Sie

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

Answer 3

oops vergaß zu erwähnen, mehrere Selektoren in jquery Schreiben ist wie

( 'selector1, selector2, ...')

, die Sie haben, haben fälschlicherweise geschrieben wie:

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

hoffe, das hilft