javascript - 网站外栏平滑滑入/滑出

Question

我有三列，我希望外部两列在刷新时平滑滑出，然后当鼠标进入左/右边缘时，特定列滑回。

这是 fiddle :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 代码执行某些操作时，它可能会停止工作或开始卡顿。

出了什么问题？

Answer 1

你可以使用这样的东西:

jsfiddle.net/3362xu89/2/

请注意，我尚未向您提供完整的解决方案。我把滑动留给你。

附注当您想要添加新类时，您必须删除这些类。