2

問題があります。これは私のウェブサイトですhttp://keironlowe.x10hosting.com/ ナビゲーションバーで動く赤い線は、以下のこのコードによるものです。しかし、意図したとおりに機能していません。私が欲しいのは、ホバーすると赤い線が長くなることです。ただし、カーソルを離すと通常のサイズに戻りますが、正しく機能しません。一度だけ機能してから更新する必要があり、ホームリンクでは機能せず、長くなる代わりに小さくなります。ヘルプ？

<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>
4

3 に答える 3

6

アニメートする前に.stop（）を呼び出してみてください。

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

編集：画像が含まれているDIVの代わりに画像のサイズを変更したい場合。これを試して：

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

希望する効果を得るには、幅と長さを調整する必要がある場合があります。

于 2009-06-09T17:29:21.847 に答える
0

相手を修正するのは簡単です。

スクリプトタグに次のように記述します。

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

次のマークアップを書くと、ホバーを笑顔にする必要があります

<div class="box"></div>
于 2009-06-09T19:10:35.773 に答える
0

おっと、言及するのを忘れました。jqueryで複数のセレクターを書くのは

（'selector1、selector2、...'）

あなたが誤って次のように書いたもの：

$（'div'、'#nav_container'）。hover（function（）{...。

お役に立てれば

于 2009-06-09T19:23:21.583 に答える