0

のセットを含むメニューがあります。このメニューliにカーソルを合わせると、コンテナの高さがアニメーション化され、関連する子が表示され.subnavます。

私が抱えている問題は2つあります。

  1. にすばやくカーソルを合わせると、その時点からアニメーションが再開されるため、コンテナliのアニメーションが遅くなります。「いずれかのにカーソルを合わせると、これを1回だけアニメーション化する」と言い、コンテナまたはサブナビゲーションからカーソルを合わせると、元の位置に戻すことができるようにしたいと思います。li

  2. コンテンツが表示されていて、.subnav別のトリガーliにカーソルを合わせると、アニメーションがコンテナーで再度実行しようとしているように見えます。そのため、その後に発生するはずのアクションに遅延が発生します。

使ってみunbind()ましbind()たが失敗しました。使ってみ:animatedましたが、ロジックが正しくないようです。

これが私のコードです：

var navHeight = $('#primary-nav').height();

$('#primary-nav-list li').hover( function() {
    var elem = $(this);

    if ($(this).is('#roc-noir')){ var subnavHeight = 173; }
    else { var subnavHeight = 235; }

    $('#primary-nav').stop(true,false).animate({height:subnavHeight}, function(){
        $('#primary-nav-list li').removeClass('active');
        $(this).addClass('open');
        $(elem).addClass('active');
        $('#primary-nav-list li').not(this).find('.subnav').fadeOut('fast');
        $(elem).find('.subnav').fadeIn('fast');
    });         
}, function(){
    $('#primary-nav').removeClass('open');
    $('#primary-nav').stop(true,false).animate({height:navHeight}, function(){
        $('#primary-nav-list li').removeClass('active');    
        $('#primary-nav-list li').not(this).find('.subnav').hide();
    });
});

どんな助けでもいただければ幸いです。

4

2 に答える 2

1

Hover Intentプラグインを見て、必要な機能を果たしているかどうかを確認してください。開始する前にわずかな遅延が追加され、その後アニメーションが「停止」されます。

于 2011-05-13T12:58:18.433 に答える
0

たぶんこのようなもの-すでに実行されている場合は中止のフラグ？

var navHeight = $('#primary-nav').height();

var running = false;

var controller = {
     hoverIn : function() {
       if (running) return;
       running = true;

       var elem = $(this);
       var subnavHeight = 235;

       if ($(this).is('#roc-noir')) { subnavHeight = 173; }

       $('#primary-nav').stop(true,false).animate({height:subnavHeight}, function(){
          $('#primary-nav-list li').removeClass('active');
          $(this).addClass('open');
          $(elem).addClass('active');
          $('#primary-nav-list li').not(this).find('.subnav').fadeOut('fast');
          $(elem).find('.subnav').fadeIn('fast');
       });         
    },
    hoverOut : function(){
       if (running) return;

       $('#primary-nav').removeClass('open');
       $('#primary-nav').stop(true,false).animate({height:navHeight}, function(){
          $('#primary-nav-list li').removeClass('active');    
          $('#primary-nav-list li').not(this).find('.subnav').hide();
          running = false;
       });

    }

$('#primary-nav-list li').hover(controller.hoverIn,controller.hoverOut);
于 2011-05-13T13:09:13.320 に答える