2009-06-09 22 views
2

Imに問題があります。 これは私のウェブサイトhttp://keironlowe.x10hosting.com/ ナビゲーションバー内を移動する赤い線は、このコードのためです。 しかし、意図したとおりに動作しません。 私がしたいのは、ホバーで赤い線が長くなることです。 しかし、カーソルを移動したときに通常のサイズに戻ると、 は正常に動作しません。一度しか動作せず、次に更新する必要があり、ホームリンクでは機能しません。助けて?jQueryの問題:ホバリング、アンホバリングが機能しない

<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> 
+0

あなたのリンクが死んでいるか、ダウン? –

+0

この質問はhttp://stackoverflow.com/questions/966084/javascript-のフォローアップであるのに役立ちます

希望or-jquery-help –

答えて

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

EDIT:あなたがイメージの代わりに、それが含まれている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); 
    }); 
}); 

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

+0

Thatsはホバーオン/オフの問題を修正しました。 しかし、iveはDIVのサイズを変更したことに気づきました。img(Nav_Line.png) まだ小さくなっています.1回以上働くためにリフレッシュする必要があります。 他にも記載がありますか? :) –

+0

@ケイン - 私の編集をお読みください。 –

+0

その作業は完璧です! 何らかの理由で、ホームとアバウトラインがポートフォリオと異なる高さになります –

0

仲間を簡単に修正できます。

は、スクリプトタグに以下の記述:フォローアップのマークを書いて、

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

と言及するのを忘れてしまったあなたのホバーはあなた

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

おっとで笑っていなければなりません。

$( 'divの'、 '#nav_container'):jQueryの中で複数のセレクタを書くこと( 'selector1、selector2、...')

誤っように書かれていている

のようなものです。ホバー(関数(){....これは

+0

あなたは以前の回答を編集する必要があります。別の回答を投稿していません。 -1 – ichiban

関連する問題