在网站上

Question

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

这是小提琴：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/

请注意，我还没有为您提供完整的解决方案。我把滑动留给你了。

P.S。如果要添加新类，则必须删除这些类。