像滑动门一样滚动关闭/打开导航

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：导航并没有按照我的设想完全打开和关闭。我希望线条像两个垂直移动的滑动门一样排列在一起或分开。它现在所做的是关闭、延迟线，然后它们向下移动到中心位置，它应该在一个动作中一起流动。

我想到的打开/关闭示例是这样的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

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

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

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);

我真的觉得现在效果还不错。工作小提琴：http://jsfiddle.net/vHcr8/8/