Probleme mit dem Drücken von Tasten drücken, um eine Aktion abzuschließen

Question

Ich habe Prev/Next-Tasten. Mit dem Code, den ich bereitstellen werde, fügt er eine Klasse .fadeaway hinzu und entfernt sie.

$("a.next").click(function(){ 
     var elem=document.querySelector("#project-container"); 

     elem.classList.add("fadeaway"); 
     setTimeout(function(){ 
     goToNextProject(); 
     elem.classList.remove("fadeaway") 
     }, 350) 

     return false; 
    }); 

    $("a.prev").click(function(){ 
     var elem=document.querySelector("#project-container"); 

     elem.classList.add("fadeaway"); 
     setTimeout(function(){ 
     goToPrevProject(); 
     elem.classList.remove("fadeaway") 
     }, 350) 

     return false; 
    }); 

Nebenbei bemerkt, ich wette, es gibt eine Möglichkeit, diese beiden zu kombinieren. Das Problem liegt also beim Tastendruck. Ich habe derzeit js, um auch die vorherigen/nächsten Elemente mit den Pfeiltasten zu navigieren.

function activateKeyNav() 
    { 
     // Description: register keypress event on document object 
     jQuery(document).on('keydown', function(event) { 
      switch(event.which) 
      { 
       case 39: // right 
        goToNextProject(); 
        break; 

       case 37: // left 
        goToPrevProject(); 
        break; 
      } 
     }); 
    } 

Ich bin nicht sicher, wie die Animation zu erstellen, dass .fadeaway tut, dann ist es 0 so blendet es in und aus den #project-container. Ich brauche es wo, wenn die linken oder rechten Tasten gedrückt werden, es ist Hinzufügen und Entfernen der .fadeaway Klasse wie die a.next und a.prev tut.

Um ein funktionierendes Beispiel zu erhalten, klicken Sie auf die Schaltfläche prev/next here.

Answer 1

Sie können eine Wrapper-Funktion schreiben, die eine Fadeaway-Klasse hinzufügt und setTimeout ausführt.

function toggleFadeAwayClass(){ 
    var elem=document.querySelector("#project-container"); 
    elem.classList.add("fadeaway"); 
    setTimeout(function(){ 
     elem.classList.remove("fadeaway") 
    }, 350) 
} 

function activateKeyNav() 
    { 
     // Description: register keypress event on document object 
     jQuery(document).on('keydown', function(event) { 
      switch(event.which) 
      { 
       case 39: // right 
        toggleFadeAwayClass(); 
        goToNextProject(); 
        break; 

       case 37: // left 
        toggleFadeAwayClass(); 
        goToPrevProject(); 
        break; 
      } 
     }); 
    } 

Hoffe das hilft Ihnen aus.

Answer 2

Nachdem die js Analyse genau, wie die Fading Werke zu kennen, und mit teilweise Code aus einer anderen Antwort, das ist, wie ich es genau gemacht verblassen, wie ich es wollte:

function activateKeyNav() 
    { 
     // Description: register keypress event on document object 
     jQuery(document).on('keydown', function(event) { 
      switch(event.which) 
      { 
       case 39: // right 
       var elem=document.querySelector("#project-container"); 
        elem.classList.add("fadeaway"); 
        setTimeout(function(){ 
         goToNextProject(); 
         elem.classList.remove("fadeaway") 
        }, 350) 
        // toggleFadeAwayClass(); 
        // goToNextProject(); 
        break; 

       case 37: // left 
       var elem=document.querySelector("#project-container"); 
        elem.classList.add("fadeaway"); 
        setTimeout(function(){ 
         goToPrevProject(); 
         elem.classList.remove("fadeaway") 
        }, 350) 
        // toggleFadeAwayClass(); 
        // goToPrevProject(); 
        break; 

       case 27: // escape 
        hasher.setHash(); 
        projectClose(); 
        break; 
      } 
     }); 
    } 

Ich dachte, wenn var elem=document.querySelector("#project-container"); wurde definiert, ich brauchte es nicht mehr, also habe ich es ohne es versucht und elem wurde nicht definiert, so dass es einen Konsolenfehler erstellt. Ist es möglich, diese Variable ganz oben einzurichten, damit ich sie nicht weiter schreiben muss?