我正在使用这块JQ来将悬停在菜单图标上的侧边导航栏的显示动画化。现在我已经得到了导航栏.8不透明度和z-索引以显示在身体上。Jquery函数可以增加Nav上的边界透明度

我想要做的是让主体动画增加左边距，为导航栏腾出空间，而不是显示在顶部。当然，我希望脚本在mouseLeave上反转动画。希望这是有道理的。任何人有一个想法，我可以添加到代码来获得所需的结果？

http://jsfiddle.net/ChilledMonkeyBrain/06ysqr1r/

<script> 
    $(function() { 
     $('#burger').hover(function() { $('nav').slideDown(1000); }); 
}); 
    $(function() { 
     $('nav').mouseleave(function() { 
$('nav').slideUp(1000); }); 
}); 
</script>

来源

2015-01-07 chilledMonkeyBrain

即可投入爵士小提琴吗？ – Todd

http://jsfiddle.net/ChilledMonkeyBrain/06ysqr1r/ – chilledMonkeyBrain

可以使用animate()方法左边界添加到#about股利。这里有一个的jsfiddle展示它是如何工作的：不是有两个单独的实例

您可以将传递给$方法单一匿名函数内这两个事件，：

http://jsfiddle.net/jkLL6yab/1/

的几点说明的$(function() {...})
hover可能不是打开菜单的最佳选项，因为它通常用于绑定mouseenter和mouseleave事件。我建议只使用mouseenter作为你的用例。

我在上面的JSFiddle链接中做了这两个更新。

看起来有点奇怪，让菜单在内容滑落时显示。您可以利用slideUp，slideDown和animate方法提供的回调参数来避免这种情况。这里有一个例子：http://jsfiddle.net/70p1dLy6/1/

来源

2015-01-07 02:48:27 NolanDC

你甚至可以用CSS做所有这些。但是，让我们继续使用js路由：首先将非导航主体内容包装在绝对定位的包装中。

DEMO

enter image description here

<body> 
    <nav> 
     <ul> 
      <li><a id="ab" href="#about">About</a> 
      </li> 
      <li><a id="po" href="#portfolio">Portfolio</a> 
      </li> 
      <li><a id="co" href="#contact">Contact</a> 
      </li> 
      <li><a id="bl" href="#blog">Blog</a> 
      </li> 
     </ul> 
    </nav> 
    <div class="wrapper"> <!-- here --> 
     <div id="burger"> 
      <img src="https://www.iconfinder.com/icons/134216/hamburger_lines_menu_icon" alt="Munu"> 
     </div>

CSS

div.wrapper { 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    margin: auto; 
    transition: left 200ms ease; 
} 
body { 
    position: relative; // relative class 
    font: normal 1.1em/1.5 sans-serif; 
    color: #fff; 
    font-family:'Raleway', sans-serif; 
    background-color: black; 
}

$(function() { 
    var navWidth = $('nav').outerWidth(true); 
    $('#burger, nav').hover(function() { 
     $('nav').stop().slideDown(200); 
     $('div.wrapper').css({ 
      'left': navWidth + 'px', 
     }); 
    }, function() { 
     $('nav').stop().slideUp(200); 
     $('div.wrapper').css({ 
      'left': '0px', 
     }); 
    }) 
});

来源

2015-01-07 03:12:19 Todd

非常有帮助，非常感谢。 – chilledMonkeyBrain

Jquery函数可以增加Nav上的边界透明度

回答

DEMO

相关问题