javascript - 像推拉门一样滚动关闭/打开导航

Question

我正在尝试关闭/打开导航，就像水平滚动条上的滑动门一样。

问题 1:当您向右滚动时，导航关闭...但是当您返回页面开头或点击结尾时，我无法重新打开它。导航打开但随后循环运行或快速关闭，不确定是什么原因造成的？

JS FIDDLE (SCROLL NAV OPEN/CLOSE)

    // PAGE LEFT NAV
    //SCROLL RIGHT HIDE NAV
        $(window).scroll(function() {

        if ($(this).scrollLeft() > 0)
         {
            $('.nav-line-top').animate({'top': 150},400);
            $('.nav-line-bottom').animate({'top': 150},400);
            $('.nav-serries-inner').delay(0).slideUp();  
         }

        else
         {
            $('.nav-line-top').animate({'top': 0},400);
            $('.nav-line-bottom').animate({'top': 0},400)
            $('.nav-serries-inner').delay(0).slideDown();
         }
    });



    // SCROLL END OF PAGE + SHOW NAV 
    $(window).scroll(function () { 
        if ($(window).scrollLeft() >= $(document).width() - $(window).width() - 40) {
            $('.nav-line-top').animate({'top': 0},400);
            $('.nav-line-bottom').animate({'top': 0},400);
            $('.nav-serries-inner').delay(0).slideDown();
        }
        else
         {
            $('.nav-line-top').animate({'top': 150},400);
            $('.nav-line-bottom').animate({'top': 150},400)
            $('.nav-serries-inner').delay(0).slideUp();
         }
    });

问题 2:导航并没有完全按照我的设想打开和关闭。我希望线条像两扇垂直滑动的门一样并拢或分开。它现在所做的是线条闭合、延迟，然后它们向下移动到中心位置，它应该在一个 Action 中一起流动。

我想到的打开/关闭的例子是这样的EXAMPLE但垂直

    nav.serries{
position:fixed;
top:56%;
left:0;

display:block;
height:400px;
width:150px;
margin: -200px 0;

padding-left:20px;
}

.nav-line{
width: 20px;
border-bottom: 1px solid #808080;

margin-bottom: 5px;
margin-top: 11px;

postion:relative;
top:0px;
left:0;     
}




 //HOVER SHOW NAV
    $('.nav-serries-open').hover(function(){
        $('.nav-line-top').animate({'top': 0},400);
        $('.nav-line-bottom').animate({'top': 0},400);
        $('.nav-serries-inner').delay(0).slideDown(); 
    });

    // LEAVE HOVER HIDE NAV
    $('nav.serries').mouseleave(function(){
        $('.nav-line-top').animate({'top': 150},400);
        $('.nav-line-bottom').animate({'top': 150},400);
        $('.nav-serries-inner').delay(200).slideUp(); 

    })

感谢您的帮助。

Answer 1

首先 - 尽量不要重复某些代码行 - 如果将动画放在单独的函数中的一个位置并在需要时调用它们，您会发现调试或更改动画会更容易。

您将需要的另一件事是帮助您不要“关闭已关闭的门”或“打开已经打开的门”的东西 - 所以让我们有一个名为 navigation 的变量，如果它打开则保持真，如果它关闭则保持假.

var navigation = true; // because it is open at the start


function nav_open() {
    if (!navigation) { // if it's closed
        navigation = true; // now it is open (will be in 400ms - but it definetly will not need to be opened again)
        $('.nav-line-top').animate({'top': 0},400);
        $('.nav-line-bottom').animate({'top': 0},400);
        $('.nav-serries-inner').delay(0).slideDown();
    }
}

function nav_close() {
    if (navigation) { // if it's open
        navigation = false; // remember that it is close now
        // ..and start nav-closing animations...
        $('.nav-line-top').animate({'top': 150},400);
        $('.nav-line-bottom').animate({'top': 150},400);
        $('.nav-serries-inner').delay(200).slideUp(); 
    }
}

现在您的代码看起来会更好更清晰...您会注意到您在输入一个元素时打开但在鼠标离开时关闭另一个元素并且您应该注意到在设置滚动时同时关闭和打开导航到左边缘或右边缘....让我们也修复这些....现在它将是:

    // mouse hover / leave - both events on nav element
$('nav.serries').hover(function() { nav_open(); });
$('nav.serries').mouseleave(function() { nav_close(); });

// scroll around left or right edge
$(window).scroll(function() {
    var scrollX = $(this).scrollLeft();
    if ((scrollX < 10) || (scrollX >= $(document).width() - $(window).width()-10)) {
        nav_open();
    } else {
        nav_close();
    }
});

好的 - 现在它可以工作了(至少) - 现在它只需要对动画做一点点改变(..是的，修复坏的 html/css 也会很好)......但它接近你想要的我想想你现在能做的最好的事情是:

// css:

.nav-serries-inner {position:relative; top:30px; width:90px; border-top:1px solid #aaa; border-bottom:1px solid #aaa;}

// html: remove your line <a><div class=line-top></div></a> and the other one (which is also "line-top" by the way)
// js: remove 3 lines from animations and do just this one in nav_open:
$('.nav-serries-inner').stop().animate({'top': 30, height: "toggle",opacity:"toggle" },400);

// and this in nav_close:
$('.nav-serries-inner').stop().animate({top: 150, height: "toggle", opacity:"toggle" },400);

我觉得现在效果还不错。工作 fiddle :http://jsfiddle.net/vHcr8/8/