0

うまく機能しているマウスオーバーで使用しているメニュー アニメーションがありますが、どうすればよいかよくわかりません。リンクがホバーされると、div の幅がアニメーション化され、アニメーション化された下線がシミュレートされます。そのメニュー項目がクリックされるとアニメーションが停止し、基本的にその項目に下線が引かれますが、他のメニュー項目がクリックされると再開します。これは、基本的にユーザーが Web サイトのどのセクションにいるかを示したい単一ページの Web サイトで使用するためのものです。

基本コード:

HTML

 <ul>             
        <li id="contactmenu">
            <a href="#contactpage">contact
                <div class="underlinecontact">               
                </div>
            </a>
        </li>
</ul>

CSS

.underlinecontact
{
    border-bottom: solid 3px maroon;
    width: 0%;
    margin-top: 8px;
}

jQuery

$(document).ready(function(){
  $("#contactmenu").hover(function(){
      $(".underlinecontact").stop().animate({width: "100%"});
    },function(){
      $(".underlinecontact").stop().animate({width: "0%"});
  });
});

フィドルはここにあります:フィドル

バインドを解除して停止する機能を試しましたが、機能しましたが、再度開始する方法がわかりません。どんな助けでも大歓迎です！

4

1 に答える 1

0

まず、個々のhoverハンドラーをすべて 1 つにまとめることができます。また、クリックしたアンカーに を追加するclassと、その存在を確認し、そうでない場合にのみアニメーション化できactiveます。

$('#Menu a').hover(function() {
    if (!$(this).hasClass('active')) {
        $(this).children('div').stop().animate({ width: '100%' });
    }
}, function() {
    if (!$(this).hasClass('active')) {
        $(this).children('div').stop().animate({ width: 0 });  
    }
});

次に、クリック ハンドラーをアタッチしてmousenter/mouseleaveイベントをトリガーします。

$('#Menu a').click(function() {
   $('#Menu a[href*="page"]').not(this).removeClass('active').trigger('mouseleave');
    $(this).addClass('active');
});

そのため、すべてのアンカー (クリックされたものを除く) からクラスを削除し、幅のアニメーションを実行するようにactiveトリガーしてから、クリックされたアンカーにクラスを追加して、ホバリング時にアニメーションが発生しないようにします。mouseleave0active

ここにフィドルがあります

于 2013-06-04T15:13:26.237 に答える