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

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

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

您需要的另一件事是帮助您不要“关闭已关闭的门”或“已打开的门” - 因此让我们有一个名为navigation的变量，并且如果它打开或保留为true如果它接近。

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

确定 - 现在它的工作原理（至少） - 现在只需要一点点更改动画（..yeah和修复坏的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/