javascript - 在网站上顺畅地滑动外栏

我有三列，希望外面的两列平滑地滑出以刷新，然后当鼠标进入左/右边缘时，特定的列会向后滑动。

这是小提琴：https://jsfiddle.net/3362xu89/

这是jQuery代码：

var toggleEdges = function(width) {
                var end = true;
                var slideOutLeftEdge = function() {
                    $('.leftAnchor').animate({width: '0px'}, 1000, function() {
                        $('.leftAnchor').hide();
                        end = true;
                    });
                };
                var slideInLeftEdge = function() {
                    $('.leftAnchor').show();
                    $('.leftAnchor').animate({width: width + 'px'}, 1000, function() {
                        end = true;
                    });
                };
                var slideOutRightEdge = function() {
                    $('.rightAnchor').animate({width: '0px'}, 1000, function() {
                        $('.rightAnchor').hide();
                        end = true;
                    });
                };
                var slideInRightEdge = function() {
                    $('.rightAnchor').show();
                    $('.rightAnchor').animate({width: width + 'px'}, 1000, function() {
                        end = true;
                    });
                };

                slideOutLeftEdge();
                slideOutRightEdge();
                $(document).on('mousemove', function(event) {
                    if (event.pageX > width) {
                        if (end) {
                            end = false;
                            slideOutLeftEdge();
                        }
                    }
                    if (event.pageX < 10) {
                        if (end) {
                            end = false;
                            slideInLeftEdge();
                        }
                    }
                    if (event.pageX < window.innerWidth - width) {
                        if (end) {
                            end = false;
                            slideOutRightEdge();
                        }
                    }
                    if (event.pageX > window.innerWidth - 10) {
                        if (end) {
                            end = false;
                            slideInRightEdge();
                        }
                    }
                });
            };
            toggleEdges(500);

这确实很糟糕-动画完成后，它会留下约100px宽的div。有时，网站上没有捕获到悬停。此外，最令人讨厌的是，当网站上还有另一个javascript代码正在执行某些操作时，它可能会停止工作或开始结结巴巴。

怎么了？

最佳答案

您可以使用如下形式：

jsfiddle.net/3362xu89/2/

请注意，我没有为您提供完整的解决方案。我把幻灯片留给你。

附言要添加新类时，您将必须删除这些类。