的slideToggle不是動畫（需要相關的代碼我有幫助）

Question

的jsfiddle：https://jsfiddle.net/32oumq5k/

問題：我一直坐在這裏2小時，搜索，編輯和嘗試新的東西，請如果代碼心不是原諒我最好的（即時通訊新的JavaScript），以及... CSS也是混亂.-。這可能是爲什麼我找不到解決方案。

但基本上，slideToggle不會爲動畫（好吧，但不是爲了我想要的），在小提琴裏面你會發現很多CSS（大部分都可以忽略），但是我試圖創建的是導航菜單，優雅地向上滑落...使用slideToggle，沒有造型的正常ul很好，但由於某種原因，我的風格弄亂了一切：（

我已經嘗試了許多不同的位置，高度，寬度，顯示器，不同的div，重命名的東西，填充，甚至刪除所有的z-索引，因爲我認爲這可能是問題。我做這一切時注意到的一件事是，如果ul的背景顏色設置（可視化動畫......它從310px動畫到像300px，然後只是消散導致我成爲生活其實際上並沒有滑動它裏面有任何的子元素是令人困惑的

如果任何人都可以幫助，將不勝感激：/也許一些新鮮的眼睛可以幫助我解決這個問題。此外，這不是重複的，我一直在字面上50其他slideToggle stackoverflow問題無人幫助，即使當結合兩個或更多的答案...所以我認爲最好的事情要做的就是得到一個答案與我的確切問題。

在此先感謝。如果我錯過了任何事情，請讓我知道。

$(document).ready(function() { 
 
    $("#nav").hide(); 
 
    $(function() { 
 
    var pull = $('#menu'); 
 
    menu = $('#nav'); 
 
    menuHeight = menu.height(); 
 

 
    $("#menu").click(function() { 
 
     menu.slideToggle(200); 
 
    }); 
 

 
    $("#pull").click(function() { 
 
     $(".test").slideToggle(700); 
 
    }); 
 

 
    $(window).resize(function() { 
 
     var w = $(window).width(); 
 
     if (w > 320 && menu.is(':hidden')) { 
 
     menu.removeAttr('style'); 
 
     } 
 
    }); 
 
    }); 
 
});

@charset "utf-8"; 
 
/* CSS Document */ 
 
/* START RESET */ 
 

 
html, body, div, span, applet, object, iframe, 
 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
 
a, abbr, acronym, address, big, cite, code, 
 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
 
small, strike, strong, sub, sup, tt, var, 
 
dl, dt, dd, ol, ul, li, 
 
fieldset, form, label, legend, 
 
table, caption, tbody, tfoot, thead, tr, th, td { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t outline: 0; 
 
\t font-weight: inherit; 
 
\t font-style: inherit; 
 
\t font-size: 100%; 
 
\t font-family: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* remember to define focus styles! */ 
 
:focus { 
 
\t outline: 0; 
 
} 
 
body { 
 
\t line-height: 1; 
 
\t color: black; 
 
\t background: white; 
 
} 
 
ol, ul { 
 
\t list-style: none; 
 
} 
 
/* tables still need 'cellspacing="0"' in the markup */ 
 
table { 
 
\t border-collapse: separate; 
 
\t border-spacing: 0; 
 
} 
 
caption, th, td { 
 
\t text-align: left; 
 
\t font-weight: normal; 
 
} 
 
blockquote:before, blockquote:after, 
 
q:before, q:after { 
 
\t content: ""; 
 
} 
 
blockquote, q { 
 
\t quotes: "" ""; 
 
} 
 

 
/* END RESET */ 
 

 
html { 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
body { 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
#navBar { 
 
\t transition: all .25s ease-in-out; 
 
\t -moz-transition: all .25s ease-in-out; 
 
\t -webkit-transition: all .25s ease-in-out; 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t background-color: #FFF; 
 
\t text-align: center; 
 
\t border-bottom: 4px solid #349BD4; 
 
\t position: fixed; 
 
\t -webkit-box-shadow: 0 5px 5px rgba(0,0,0,.3); 
 
    -moz-box-shadow: 0 5px 5px rgba(0,0,0,.3); 
 
    box-shadow: 0 5px 5px rgba(0,0,0,.3); 
 
} 
 

 
#navBar #navContent { 
 
\t transition: all .25s ease-in-out; 
 
\t -moz-transition: all .25s ease-in-out; 
 
\t -webkit-transition: all .25s ease-in-out; 
 
\t display: inline-block; 
 
\t height: 100%; 
 
\t width: 1200px; 
 
\t text-align: center; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t background-color: #FFF; 
 
} 
 

 
#navBar #navContent ul { 
 
\t transition: all .25s ease-in-out; 
 
\t -moz-transition: all .25s ease-in-out; 
 
\t -webkit-transition: all .25s ease-in-out; 
 
\t background-color: #FFF; 
 
\t height: 100%; 
 
\t width: 800px; 
 
\t float: left; 
 
\t overflow: hidden; 
 
} 
 

 
#navBar #navContent ul li { 
 
\t transition: all .25s ease-in-out; 
 
\t -moz-transition: all .25s ease-in-out; 
 
\t -webkit-transition: all .25s ease-in-out; 
 
    list-style: none; 
 
    float: left; 
 
    text-align: center; 
 
    height: 50px; 
 
\t display: block; 
 
\t width: auto; 
 
} 
 

 
#navBar #navContent ul li a { 
 
\t width: 90px; 
 
\t height: 20px; 
 
\t padding: 15px; 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
 
\t font-style: normal; 
 
    font-weight: 300; 
 
\t font-size: 18px; 
 
\t color: #2C363F; 
 
\t transition: all .25s ease-in-out; 
 
    -moz-transition: all .25s ease-in-out; 
 
    -webkit-transition: all .25s ease-in-out; 
 
} 
 

 
#navBar #navContent ul li a:hover { 
 
\t background-color: #349BD4; 
 
\t color: #FFF; 
 
\t transition: all .25s ease-in-out; 
 
\t -moz-transition: all .25s ease-in-out; 
 
\t -webkit-transition: all .25s ease-in-out; 
 
} 
 

 
#navBar #navContent ul li a.active { 
 
\t transition: all .25s ease-in-out; 
 
\t -moz-transition: all .25s ease-in-out; 
 
\t -webkit-transition: all .25s ease-in-out; 
 
\t background-color: #349BD4; 
 
\t color: #FFF; 
 
} 
 

 
#navBar #navContent #server { 
 
\t float: right; 
 
\t display: block; 
 
\t height: 20px; 
 
\t width: auto; 
 
\t margin-top: 10px; 
 
\t margin-right: 5px; 
 
\t margin-left: 5px; 
 
\t margin-bottom: 10px; 
 
\t padding-top: 5px; 
 
\t padding-right: 10px; 
 
\t padding-left: 10px; 
 
\t padding-bottom: 5px; 
 
\t color: #2C363F; 
 
\t border-radius: 15px; 
 
\t font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
 
\t font-style: normal; 
 
    font-weight: 400; 
 
\t transition: all .25s ease-in-out; 
 
\t -moz-transition: all .25s ease-in-out; 
 
\t -webkit-transition: all .25s ease-in-out; 
 
} 
 

 
#navBar #navContent #server:hover { 
 
\t background-color: #349BD4; 
 
\t color: #FFF; 
 
\t transition: all .25s ease-in-out; 
 
\t -moz-transition: all .25s ease-in-out; 
 
\t -webkit-transition: all .25s ease-in-out; 
 
\t cursor: pointer; 
 
} 
 

 
#navBar #navContent #menu { 
 
\t transition: all .25s ease-in-out; 
 
\t -moz-transition: all .25s ease-in-out; 
 
\t -webkit-transition: all .25s ease-in-out; 
 
\t display: none; 
 
\t width: 40px; 
 
\t height: 30px; 
 
\t margin: 5px; 
 
\t margin-right: 20px; 
 
\t padding-top: 3px; 
 
\t padding-bottom: 3px; 
 
\t float: right; 
 
\t border: 2px solid #AEC1D3; 
 
\t border-radius: 5px; 
 
\t color: #787878; 
 
} 
 

 
#header { 
 
\t 
 
} 
 

 
#main { 
 
\t width: 100%; 
 
\t height: 3000px; 
 
\t background-color: #FFF; 
 
\t top: 54px; 
 
} 
 
.test { 
 
\t margin-top: 100px; 
 
} 
 

 
#pull { 
 
\t margin-top: 90px; 
 
\t display: block; 
 
\t position: relative; 
 
} 
 

 
@media screen and (min-width: 761px) and (max-width: 1240px) { 
 
\t 
 
#navBar { 
 
\t width: 100%; 
 
} 
 

 
#navBar #navContent { 
 
\t width: 100%; 
 
} 
 
\t 
 
#navBar #navContent #server { 
 
\t opacity: 0; 
 
\t content: none; 
 
\t color: #FFF; 
 
} 
 

 
#navBar #navContent #server:hover { 
 
\t opacity: 0; 
 
\t content: none; 
 
\t background-color: #FFF; 
 
\t cursor: default; 
 
} 
 
\t 
 
} 
 

 
@media screen and (min-width: 551px) and (max-width: 4000px) { /*styles for small screens in here*/ 
 

 
#navBar { 
 
\t width: 100%; 
 
\t float: none; 
 
} 
 

 
#navBar #navContent { 
 
\t width: 100%; 
 
\t float: none; 
 
} 
 

 
#navBar #navContent ul { 
 
\t display: block; 
 
\t height: 310px; 
 
\t width: 100%; 
 
\t float: none; 
 
} 
 

 
#navBar #navContent ul li { 
 
\t width: 100%; 
 
\t display: inline; 
 
\t height: 50px; 
 
\t float: none; 
 
} 
 

 
#navBar #navContent ul li a { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t display: inline-block; 
 
\t float: none; 
 
} 
 

 
#navBar #navContent ul li a:hover { 
 
\t width: 100%; 
 
\t display: block; 
 
\t float: none; 
 
} 
 

 
#navBar #navContent #menu { 
 
\t display: block; 
 
\t width: 40px; 
 
\t height: 30px; 
 
\t margin: 5px; 
 
\t margin-right: 20px; 
 
\t padding-top: 3px; 
 
\t padding-bottom: 3px; 
 
\t float: right; 
 
\t border: 2px solid #AEC1D3; 
 
\t border-radius: 5px; 
 
\t color: #787878; 
 
} 
 

 
#navBar #navContent #menu:after { 
 
\t display: inline-block; 
 
} 
 

 
#navBar #navContent #server { 
 
\t position: absolute; 
 
\t float: left; 
 
\t margin-left: 20px; 
 
} 
 

 
@media screen and (max-width: 550px) { /*styles for tiny screens in here*/ 
 

 
html { 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
body { 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t margin: 0px; 
 
} 
 

 
#navBar { 
 
\t width: 100%; 
 
\t height: 75px; 
 
\t background-color: #454545; 
 
\t text-align: center; 
 
\t border-bottom: 15px solid #2F2F2F; 
 
\t position: fixed; 
 
} 
 

 
#navBar #navContent { 
 
\t display: inline-block; 
 
\t height: 100%; 
 
\t width: 400px; 
 
\t text-align: center; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t background-color: #454545; 
 
} 
 

 
#navBar #navContent ul { 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
\t background-color: #454545; 
 
\t height: 100%; 
 
} 
 

 
#navBar #navContent ul li { 
 
    list-style: none; 
 
    float: left; 
 
    text-align: center; 
 
    height: 100%; 
 
\t display: block; 
 
\t background-color: #454545; 
 
\t width: 20%; 
 
\t width: calc(100%/5); 
 
} 
 

 
#navBar #navContent ul li a { 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t display: flex; 
 
    /* flex-direction: column;*/ 
 
    align-items: center; 
 
\t text-align: center; 
 
\t font-family: 'Josefin Sans', sans-serif; 
 
\t font-style: normal; 
 
    font-weight: 700; 
 
\t font-size: 24px; 
 
\t justify-content: center; 
 
\t color: #FFF; 
 
\t transition: all .25s ease-in-out; 
 
    -moz-transition: all .25s ease-in-out; 
 
    -webkit-transition: all .25s ease-in-out; 
 
} 
 

 
#navBar #navContent ul li a:hover { 
 
\t background-color: #349BD4; 
 
\t color: #FFF; 
 
\t transition: all .25s ease-in-out; 
 
\t -moz-transition: all .25s ease-in-out; 
 
\t -webkit-transition: all .25s ease-in-out; 
 
} 
 

 
}

<title>Untitled Document</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div class="slideFix" id="navBar"> 
 
    <div class="slideFix" id="navContent"> 
 
     <a href="#" id="menu"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></a> 
 
     <ul id="nav"> 
 
     <li> 
 
      <a class="active"> 
 
      <i class="fa fa-home" aria-hidden="true"></i> &nbsp;Home 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      <i class="fa fa-shopping-basket" aria-hidden="true"></i> &nbsp;Store 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      <i class="fa fa-comments" aria-hidden="true"></i> &nbsp;Forums 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      <i class="fa fa-heart" aria-hidden="true"></i> &nbsp;Vote 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      <i class="fa fa-users" aria-hidden="true"></i> &nbsp;Users 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      <i class="fa fa-envelope" aria-hidden="true"></i> &nbsp;Contact 
 
      </a> 
 
     </li> 
 
     </ul> 
 
     <div id="server" data-clipboard-text="play.climaxmc.org"> 
 
     play.climaxmc.org 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <a id="pull">Menu</a> 
 
    <ul class="test"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">How-to</a></li> 
 
    <li><a href="#">Icons</a></li> 
 
    <li><a href="#">Design</a></li> 
 
    <li><a href="#">Web 2.0</a></li> 
 
    <li><a href="#">Tools</a></li> 
 
    </ul> 
 
</body>

Answer 1

它基本上是因爲通過CSS應用transition財產。現在我已經禁用了所有元素的transition屬性，並且它按預期工作。這裏是DEMO。

首先，你給transition財產的所有事情，在那個特定的element，其中包括hide和show也發生了。 transition:all .25s ease-in等和transition time是如此之少，其中0.25秒。因此，您需要正確決定並使用CSS Transitions，並確保在您有transition-all時，您不會執行任何jquery動畫。這會像現在發生的那樣行爲不當。與財產施加大於CSS transitionall你可以只改變元素的CSS像menu.css('display','block');這需要動畫的照顧動畫和酵母不要忘記增加transition time一些3s或4s

Answer 2

基於古魯普拉薩德饒的回答，我解決的風格#navBar #navContent ul li a通過去除height: 100%

ONLINE DEMO