Question

我有三个div，我想在页面左侧刷新左边的一个div，当鼠标点击左边缘时我想让div向右滑动。

问题是CSS转换属性第一次工作，但是当我再次使用jQuery使用转换时，它不会再次工作。我该如何解决这个问题？

这是JS代码：

var toggleEdges = function(width) {
                var end = true;
                var slideOutLeftEdge = function() {
                    $('.leftAnchor').attr('class', 'leftAnchor').addClass("slideOutLeftEdge").delay(1000).queue(function(){
                        $('.leftAnchor').removeClass('slideOutLeftEdge');
                        $('.leftAnchor').css('left', '-500px');
                        $('.leftAnchor').hide();
                        $(this).clearQueue();
                        $( this ).dequeue();
                    });
                };
                var slideInLeftEdge = function() {
                    $('.leftAnchor').show();
                    $('.leftAnchor').attr('class', 'leftAnchor').addClass("slideInLeftEdge").delay(1000).queue(function(){
                        $('.leftAnchor').removeClass('slideInLeftEdge');
                        $('.leftAnchor').css('left', '0');
                        $(this).clearQueue();
                        $( this ).dequeue();
                    });
                };
                var slideOutRightEdge = function() {
                    $('.rightAnchor').attr('class', 'rightAnchor').addClass("slideOutRightEdge").delay(1000).queue(function(){
                        $('.rightAnchor').hide();
                    });
                };
                var slideInRightEdge = function() {
                    $('.rightAnchor').show();
                    $('.rightAnchor').attr('class', 'rightAnchor').addClass("slideInRightEdge").delay(1000);
                };

                $(document).on('mousemove', function(event) {
                    if (event.pageX > width && $('.leftAnchor').is(':visible')) {
                        slideOutLeftEdge();
                    }
                    if (event.pageX < 10 && !$('.leftAnchor').is(':visible')) {
                        slideInLeftEdge();
                    }
                    if (event.pageX < window.innerWidth - width && $('.rightAnchor').is(':visible')) {
                        //slideOutRightEdge();
                    }
                    if (event.pageX > window.innerWidth - 10 && !$('.rightAnchor').is(':visible')) {
                        //slideInRightEdge();
                    }
                });
            };
            toggleEdges(500);

Answer 1

您在此处遇到的问题是基于您的div可见且检查!$('.leftAnchor').is(':visible')。

我做了一些更改来重用jQuery对象，而不是每次需要时创建它们（$leftAnchor和$rightAnchor）

var toggleEdges = function (width) {
    var end = true;
    var $leftAnchor = $('.leftAnchor');
    var $rightAnchor = $('.rightAnchor');

    var slideOutLeftEdge = function () {
        $leftAnchor.attr('class', 'leftAnchor').addClass("slideOutLeftEdge").delay(1000).queue(function () {
            console.log("slideOutLeftEdge");
            $leftAnchor.removeClass('slideOutLeftEdge');
            $leftAnchor.css('left', '-500px');
            //$leftAnchor.hide();
            $(this).clearQueue();
            $(this).dequeue();
        });
    };
    var slideInLeftEdge = function () {
        $leftAnchor.show();
        $leftAnchor.attr('class', 'leftAnchor').addClass("slideInLeftEdge").delay(1000).queue(function () {
            console.log("slideInLeftEdge");
            //$leftAnchor.removeClass('slideInLeftEdge');
            //$leftAnchor.css('left', '0');
            $(this).clearQueue();
            $(this).dequeue();
        });
    };
    var slideOutRightEdge = function () {
        $rightAnchor.attr('class', 'rightAnchor').addClass("slideOutRightEdge").delay(1000).queue(function () {
            $rightAnchor.hide();
        });
    };
    var slideInRightEdge = function () {
        $rightAnchor.show();
        $rightAnchor.attr('class', 'rightAnchor').addClass("slideInRightEdge").delay(1000);
    };

    $(document).on('mousemove', function (event) {
        if (event.pageX > width && $leftAnchor.is(':visible')) {
            slideOutLeftEdge();
        }
        if (event.pageX < 10 && $leftAnchor.css('left') === '-500px') {
            slideInLeftEdge();
        }
        if (event.pageX < window.innerWidth - width && $rightAnchor.is(':visible')) {
            //slideOutRightEdge();
        }
        if (event.pageX > window.innerWidth - 10 && !$rightAnchor.is(':visible')) {
            //slideInRightEdge();
        }
    });
};
toggleEdges(500);

我更新了你的jsfiddle - https://jsfiddle.net/8qxua9Lx/6/

如果这就是您所需要的，那么您可以改进代码，使其能够使用正确的div

更新CSS过渡

1 个答案: