CSSのトランジションが頻繁に再生されています。 jQueryの

Question

経由で追加されましたので、私は（2つのdivを、jQueryの.hideを使用して負荷に隠されているそのうちの一つを持っている）

一つのdivにidである私がしたいのメニューであり、他はグランプリ・修正・メニュー

です2つのボタンの間をフェードしてスライドさせます。そのレストランメニューでは、メニュー（アプリ、エントリー、デザートなど）のさまざまなセクションにスムーズにスクロールしたいが、ユーザーがPrix Fixボタンをクリックすると、ページはフェードして通常メニューをスライドさせるPrix​​ Fixメニューでフェード＆スライドします。 Prix​​ Fixメニューが開いている場合は、Prix Fixリンク以外のリンクのいずれかをクリックして、メインメニューページに戻り、Prix Fixをスライドさせて、通常メニューでスライドさせます。

これを達成するには、Animate.cssからクラスを動的に追加したり削除したりするだけです。問題は、アニメーションが（たとえ、.o​​ne（）メソッドを使用していても）アニメーションが複数回連続していることです。私はそれがアニメーションのイベントを聞いてループを起こしている別のアニメーションを再生するためかもしれないと信じています。しかし、それは無限にではなく、それを正確に4回再生するということは奇妙です。私も（タグの下部の中の前のスクリプトの後に配置）スムーズなスクロールスクリプトにもアンカーリンクでの作業を持って

$('#prix-fix-menu, #catering-menu').hide(); 
    $("a[href='#prix-fix']").on('click', function() { 
     $('#menus').removeClass().addClass('animated fadeOutLeft'); 
     $('#menus').one('animationend webkitAnimationEnd', function() { 
      $("#menus").hide(); 
      $('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight'); 
     }); 
    }); 


    $("a:not(a[href='#prix-fix'])").on('click', function() { 
     $('#prix-fix-menu').removeClass().addClass('animated fadeOutRight'); 
     $('#prix-fix-menu').one('animationend webkitAnimationEnd', function() { 
      $("#prix-fix-menu").hide(); 
      $('#menus').show().removeClass().addClass('animated fadeInLeft'); 
     }); 
    }); 

：

は、ここではJavaScriptです。ジャストインケースここにこれを置くことは、問題を引き起こしていただきました！これは私がそう思ういけないにもかかわらず：

$('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 

     var target = this.hash; 
     var $target = $(target); 

     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top 
      }, 900, 'swing', function() { 
      window.location.hash = target; 
     }); 
    }); 

CSSやHTMLなどのようなより多くの情報が必要な場合は、私が知っていると病気が追加さが、マークアップのかなり多くがありますすべての項目のためにメニューのために。ライブプロジェクトに

リンク：事前にProject

ありがとう！

Answer 1

のでanimationend webkitAnimationEndバインド解除する前に、アニメーションを開始、このCODE1

CODE1

$('#prix-fix-menu, #catering-menu').hide(); 
$("a[href='#prix-fix']").on('click', function() { 
    //add this line 
    $('#prix-fix-menu').unbind('animationend webkitAnimationEnd'); 

    $('#menus').removeClass().addClass('animated fadeOutLeft'); 
    $('#menus').one('animationend webkitAnimationEnd', function() { 
     $("#menus").hide(); 
     $('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight'); 
    }); 
}); 

$("a:not(a[href='#prix-fix'])").on('click', function() { 
    //add this line 
    $('#menus').unbind('animationend webkitAnimationEnd'); 

    $('#prix-fix-menu').removeClass().addClass('animated fadeOutRight'); 
    $('#prix-fix-menu').one('animationend webkitAnimationEnd', function() { 
     $("#prix-fix-menu").hide(); 
     $('#menus').show().removeClass().addClass('animated fadeInLeft'); 
    }); 
}); 

あなたのコードが複数のanimationend webkitAnimationEndを結合引き起こされることが後。

WHY

問題animationend webkitAnimationEndです。 animationendとwebkitAnimationEndは異なるイベントです。

あなたの場合、2つのイベントを同時に追加しようとしました。トリガーアニメーションが終了した後に別のイベントが残されます。この状況を簡単に理解することができます。 CODE2に従ってください。 で

CODE2

$('#prix-fix-menu, #catering-menu').hide(); 
$("a[href='#prix-fix']").on('click', function() { 
    $('#menus').removeClass().addClass('animated fadeOutLeft'); 
    $('#menus').one('webkitAnimationEnd', function() { 
     $("#menus").hide(); 
     $('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight'); 
    }); 
}); 

$("a:not(a[href='#prix-fix'])").on('click', function() { 
    $('#prix-fix-menu').removeClass().addClass('animated fadeOutRight'); 
    $('#prix-fix-menu').one('webkitAnimationEnd', function() { 
     $("#prix-fix-menu").hide(); 
     $('#menus').show().removeClass().addClass('animated fadeInLeft'); 
    }); 
}); 

CODE2、唯一animationendイベントを削除します。それはうまくいくようです。しかし同じボタンを繰り返しクリックしても問題はあります。CODE2を処理するには、if-statementを使用して同じボタンを繰り返しクリックするようにユーザーをフィルタする必要があります。