javascript - 更新 CSS 过渡

Question

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

这是 fiddle :https://jsfiddle.net/8qxua9Lx/1/

问题是 CSS transition 属性第一次起作用，但是当我使用 jQuery 再次使用 transform 时它第二次不起作用。我该如何解决这个问题？

这是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