CSS-Übergänge spielen zu oft; Hinzugefügt via jQuery

Question

So habe ich 2 divs, einer von ihnen auf Belastung mit jQuery .Hide versteckt()

Ein div id Menüs und der andere ist prix-fix-Menü

Ich möchte Fade und gleiten zwischen den 2 mit den Tasten klicken. Es ist ein Restaurant-Menü, so dass ich sanft zu den verschiedenen Bereichen des Menüs (wie Apps, Vorspeisen, Dessert etc.) scrollen möchte, aber dann, wenn der Benutzer den Prix Fix-Knopf klickt, wird die Seite verblassen und das normale Menü herausziehen und verblasst und gleitet im Prix Fix-Menü. Wenn das Prix Fix-Menü geöffnet ist, möchte ich einen der ANDEREN Links als den Prix-Fix-Link verwenden, um den Benutzer zurück auf die Hauptmenü-Seite zu führen, den Prix Fix zu gleiten und in das normale Menü zu gleiten.

Um dies zu erreichen, bin ich nur dynamisch hinzufügen und entfernen Klassen aus Animate.css. Das Problem ist, dass die Animationen mehr als einmal abgespielt werden (obwohl ich die Methode .one() verwende). Ich glaube, es könnte daran liegen, dass ich das Ereignis animationend höre, um dann eine andere Animation zu spielen, die eine Schleife verursacht. Aber was ist seltsam, dass es genau 4 mal spielt, nicht unendlich.

Hier ist das javascript:

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

ich auch einen glatten Scroll-Skript (positionierte nach dem vorherigen Skript in am Ende des Tags) Arbeit mit den Ankern sowie Links. Putting dies hier nur im Fall dies was das Problem verursacht, obwohl ich denke nicht so:

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

Wenn mehr Informationen wie CSS oder HTML sind dann lassen Sie uns benötigt kennen und Ill hinzugefügt, aber es gibt eine ganze Reihe von Markup für das Menü wegen aller Artikel.

Link zum Live-Projekt: Project

Vielen Dank im Voraus!

Answer 1

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

Code mehr Bindungs ​​animationend webkitAnimationEnd verursacht werden kann, so animationend webkitAnimationEnd unbind vor Animation starten.

WARUM

Problem ist animationend webkitAnimationEnd. animationend und webkitAnimationEnd ist ein anderes Ereignis.

In Ihrem Fall haben Sie versucht, zwei Ereignisse gleichzeitig hinzuzufügen. Ein anderes Ereignis wird nach dem Ende der Trigger-Animation beendet. Sie können leicht über diese Situation verstehen. Versuchen Sie, CODE2 zu folgen.

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

In CODE2, entfernen Sie nur animationend Ereignis. Es scheint gut zu funktionieren. Aber es hat immer noch Probleme, wenn Sie wiederholt auf die gleiche Schaltfläche klicken.Um CODE2 zu arbeiten, müssen Sie filtern, damit Benutzer wiederholt gleichen Knopf unter Verwendung if-statement klicken.