Question

我正试图在水平卷轴上关闭/打开像滑动门一样的导航。

问题1：向右滚动导航关闭...但是当您向后滚动到页面开头或结束时我无法将其打开。导航打开，但然后循环该功能或快速关闭，不知道是什么导致这个？

    // 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

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

你需要的另一件事是帮助你不要“关闭关闭的门”或“打开已打开的门” - 所以让我们有一个名为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);

我真的认为现在效果并不差。工作小提琴：http://jsfiddle.net/vHcr8/8/

滚动关闭/打开导航像一个推拉门

1 个答案: