我正在使用這塊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

相關問題