工作总结：

我已经通过jQuery方法实现了addClass() / removeClass() / toggleClass()组合的CSS过渡动画以及项目某个部分的实现.animate()。第一个用于动画书籍的互动，例如，选择一个通过转换元素的几个属性（边框，颜色，不透明度等）将其与其余书籍区分开，即使如此应用于伪类如：hover。后者（.animate）与创造平滑水平滚动内容的想法紧密相关。实际上，当从当前书籍中选择另一本书时，它会向左/右移动书籍的整个容器。我添加了箭头键功能（ ← 和 → ）以在书籍之间导航。

的问题：

一切都很好（不吹牛！）一直写到网站的垃圾邮件（垃圾邮件输入）。如果你在我为上面提到的键分配的书籍之间快速导航，它将会破坏书籍容器的左/右动画，以及因改变他们尊重的课程而使少数书籍出现故障。

P.s。：我没有在这里做过任何小提琴或代码片段，因为从浏览器的Inspect Element通过网页到客户端可以看到所有内容。如果有人要求提供代码，我会毫不犹豫地编辑我的问题。

Answer 1

这个实现怎么样？

替换

$(document).keydown(function (e) {
    switch (e.which) {
        case 37: // left
            var prevBook = $(".bookMain").prev()[0];
            selectBook(prevBook);
            break;

        case 39: // right
            var nextBook = $(".bookMain").next()[0];
            selectBook(nextBook);
            break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

var animation = false;
$(document).keydown(function (e) {
    switch (e.which) {
        case 37: // left
            if(!animation){
                animation = true;
                var prevBook = $(".bookMain").prev()[0];
                if(typeof prevBook == "undefined")
                    animation = false;
                else
                    selectBook(prevBook);
                setTimeout(function(){animation = false;},500);
            }
            break;

        case 39: // right
            if(!animation){
                animation = true;
                var nextBook = $(".bookMain").next()[0];
                if(typeof nextBook == "undefined")
                    animation = false;
                else
                    selectBook(nextBook);
                setTimeout(function(){animation = false;},500);
            }
            break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

<强>更新

添加了一个if条件来解决在最后一张幻灯片中按下右键并从第一张幻灯片按下左侧时出现的控制台错误

动画在它完成之前的窃听

工作总结：

的问题：

1 个答案: