slideToggle没有动画（需要与我的代码相关的帮助）

Question

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

问题：我一直坐在这里2个小时，搜索，编辑和尝试新事物，请原谅我，如果代码不是最好的（我是javascript的新手），那么...... CSS也很麻烦.- 。这可能是我无法找到解决方案的原因。

但基本上，slideToggle不会动画（确实如此，但不是我想要它），在小提琴中你会发现很多CSS（大部分都可以忽略）但是我试图创建的是导航菜单优雅地向下滑动...使用slideToggle，没有样式的普通ul工作正常，但由于某种原因，我的风格混淆了一切：（

我尝试了很多不同的位置，高度，宽度，显示，不同的div，重命名的东西，填充，甚至删除了所有的z索引，因为我认为这可能是问题。我做了所有这一切时注意到的一件事是，如果设置ul的背景颜色（可视化动画......它从310px动画到300px，然后只是消失，这让我相信它实际上没有滑动任何里面的儿童元素令人困惑

如果有人能提供帮助，那将非常感激：/也许一些新鲜的眼睛可以帮助我解决这个问题。这也不是重复，我已经完成了50个其他的slideToggle stackoverflow问题NONE帮助，即使在组合两个或更多答案时...所以我认为最好的办法是获得与我的确切问题相关的答案

提前谢谢。如果我错过任何事情，请告诉我。

$(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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* END RESET */

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

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

#navBar {
	transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	width: 100%;
	height: 50px;
	background-color: #FFF;
	text-align: center;
	border-bottom: 4px solid #349BD4;
	position: fixed;
	-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 {
	transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	display: inline-block;
	height: 100%;
	width: 1200px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
}

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

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

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

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

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

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

#header {
	
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#navBar #navContent ul li a {
	height: 100%;
	width: 100%;
	display: block;
	text-decoration: none;
	display: flex;
    /* flex-direction: column;*/
    align-items: center;
	text-align: center;
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
    font-weight: 700;
	font-size: 24px;
	justify-content: center;
	color: #FFF;
	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 {
	background-color: #349BD4;
	color: #FFF;
	transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-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

它主要是因为通过transition应用了CSS属性。现在我已经禁用了所有元素的所有transition属性，它按预期工作。这是 DEMO 。

最重要的是，您已为该特定transition上发生的所有内容提供了element属性，其中包括hide和show。 transition:all .25s ease-in等，而transition time是如此之少， 0.25秒。因此，您需要正确决定并使用CSS Transitions，并确保在transition-all jquery时不执行任何CSS transition动画。这会像现在一样发生错误。如果上面all应用了属性CSS，您可以更改menu.css('display','block');这样的元素transition time来处理动画动画，并且不要忘记增加3s某些4s或PlotLensProfileThread PlotRef = new PlotLensProfileThread();

Answer 2

根据Guruprasad Rao的回答，我通过删除#navBar #navContent ul li a来修复height: 100%的样式

ONLINE DEMO