Question

我有Prev / Next按钮。使用我即将提供的代码，它会添加和删除类.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也用箭头键导航prev / next项目。

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

希望这可以帮助你。

Answer 2

在分析了js以确切知道衰落是如何工作的，并使用来自另一个答案的部分代码之后，这就是我如何使它完全消失的方式：

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

我认为如果定义var elem=document.querySelector("#project-container");我不再需要它了，所以我没有它就尝试了它并且没有定义elem所以它创建了一个控制台错误。是否有可能在最顶端建立这个变量，所以我不需要继续写它？

无法定位按键以完成操作

2 个答案: