javascript - 难以定位按键来完成操作

Question

我有上一个/下一个按钮。使用我即将提供的代码，它添加和删除了一个类 .fadeaway。

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

顺便说一句，我打赌有一种方法可以将这两者结合起来。所以问题出在按键上。我目前有 js 还可以使用箭头键导航上一个/下一个项目。

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

我不确定如何创建 .fadeaway 所做的动画，它是 0 所以它会淡入和淡出 #project-container.我需要它，如果按下左键或右键，它会添加和删除 .fadeaway 类，如 a.next 和 a.prev > 正在做。

要获取工作示例，请单击上一个/下一个按钮 here .

Answer 1

您可以编写一个包装函数来添加 fadeaway 类并执行 setTimeout。

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

希望这对您有所帮助。