为什么我的 jquery slideToggle 下拉菜单生涩/摇摆不定？答案

【问题标题】：Why is my jquery slideToggle dropdown jerky / wobbly?为什么我的 jquery slideToggle 下拉菜单生涩/摇摆不定？
【发布时间】：2015-04-06 23:17:03
【问题描述】：

我正在编写一个带有下拉登录脚本的网页。我在列表项上使用 jquery slideToggle() 在悬停时显示登录表单。

谁能告诉我为什么我的下拉表单有时会在鼠标关闭时感觉生涩/摇晃？

附：登录“按钮”在 625px 和 750px 之间不会显示

$("#login").hover(function() {
	$("#login-form").slideToggle();
});

body {
	background: gray url("../img/bg-default.png") no-repeat;
	background-size: cover;
	font-size: 85%;
	font-family: Arial, 'Lucicda Sans Unicode';
	line-height: 1.5;
	text-align: left;
	margin: 0 auto;
	width: 70%;
	clear: both;
}

a {
	color: #474E69; /*#CF5C3F;*/
	text-decoration: none;
}

a:link, a:visited {
	color: #474E69; /*#CF5C3F;*/
}

a:hover, a:active {
	color: white;
	background-color: #474E69; /*#CF5C3F;*/
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}


/* HTML4 FALLBACK */
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}


/* HEADER */
.main-header img {
	width: 100%;
	height: auto;
}


/* NAVIGATION */
.navigation {
	background-color: #666;
	height: 40px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 2%;
	padding-right: 40px;
}

.navigation ul {
	list-style: none;
	margin: 0 auto;
}

.navigation ul.main-nav li {
	float: left;
	display: inline;
}

.navigation ul.ext-nav li {
	float: right;
	display: inline;
}

.navigation ul li a {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.navigation a:link, .navigation a:visited {
	color: white;
	display: inline-block;
	padding: 10px 20px;
	height: 20px
}

.navigation a:hover, .navigation a:active, .navigation .active a:link, .navigation .active a:visited {
	background-color: #474E69; /*#CF5C3F;*/
	text-shadow: none;
}


/* CONTENT */
.main-content {
	width: 70%;
	float: left;
	line-height: 25px;
}

.main-content article {
	background-color: white;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 5%;
	margin-bottom: 3%;
}

.main-content .post-info {
	font-style: italic;
	font-size: 80%;
	color: #999;
}



/* SIDEBAR */
.sidebar {
	width: 28%;
	float: left;
	margin-left: 2%;
}

.sidebar article {
	background-color: white;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 5%;
	margin-bottom: 8%;
}


/* FOOTER */
.main-footer {
	width: 100%;
	height: 40px;
	float: left;
	clear: both;
	margin-bottom: 2%;
	text-align: center;
	color: white;
	background-color: #666;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.main-footer p {
	margin: 10px auto;
}

/* login.css */
#login-form  {
	position: absolute;
	right: 15%;
    display: none;
    float: right;
    clear: both;
    background-color: #666;
    padding: 0 2% 2% 2%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#login-form .text {
	width: 100%;
    float: right;
    margin-bottom: 2%;
}

#login-form .submit {
    float: right;
}

/* mobile.css */
/* SCREENS LOWER THAN 750xp NO LOGIN */
@media only screen and (min-width: 625px) and (max-width: 750px) {	
	.navigation ul.ext-nav {
		display: none;
	}
	
	.navigation {
        padding-right: 0;
	}
}


/* SCREENS BETWEEN 150px & 600px */
@media only screen and (max-width: 625px) {
	body {
		width: 90%;
		font-size: 95%;
	}
	
	.navigation {
		height: 200px;
        padding-right: 0;
	}
	
	.navigation ul {
		padding-left: 0;
	}
	
	.navigation ul li {
		width: 100%;
		text-align: center;
	}
	
	.navigation a:link, .navigation a:visited {
		padding: 10px 25px;
		height: 20px;
		display: block;
	}
    
    #login-form  {
        width: 86%;
        right: 5%;
    }
		
	.main-content {
		width: 100%;
	}
	
	.main-content article {
		margin-bottom: 2%;
	}
	
	.post-info {
		display: none;
	}
	
	.sidebar {
		width: 100%;
		margin-left: 0;
	}
	
	.sidebar article {
		padding: 2% 3%;
		margin-bottom: 2%;
	}
}

<!DOCTYPE html>
<html>
	<head>
		<title>iRock.no</title>
		
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/mobile.css" />
		<link rel="stylesheet" type="text/css" href="css/login.css" />
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<script src="script/login.js"></script>
		<!-- IE9 AND LESS HTML5 SUPPORT -->
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>

	<body>
	
		<!-- HEADER -->
		<header class="main-header">
			<img alt="Header" src="http://lorempixel.com/1280/300/iRock-3ngineering/">
		</header>
		
		
		<!-- NAVIGATION -->
		<nav class="navigation">
			<ul class="main-nav">
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">Workspace</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			
			<ul class="ext-nav">
				<li id="login">
					<a  href="#" margin-right="40px">login</a>
					<form id="login-form" action="script/login.php" method="post">
			            <p><input class="text" type="text" name="username" placeholder="username" /></p>
			            <p><input class="text" type="password" name="password" placeholder="password" /></p>
			            <p><input class="submit" type="submit" value="submit" /></p>
					</form>
				</li>
				
			</ul>
		</nav>
		
		
		<!-- CONTENT -->
		<section class="main-content">
			<!-- TODO: program article generator -->
			<article>
				<header class="article-header">
					<h1><a href="#">First Article</a></h1>
				</header>
				
				<footer>
					<p class="post-info">by iRock</p>
				</footer>
				
				<content>
					<p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec. 
					Ius harum lobortis ex, paulo iuvaret argumentum his ex. 
					Vel ne vocibus menandri constituto. 
					Populo salutatus patrioque est in. 
					Id laoreet propriae consulatu mel. 
					Assum prodesset at eos, ius at tota dolorum adversarium. 
					Ad inani impetus impedit duo, an quo tempor laoreet.</p>

					<p>Tantas similique eum id, idque veniam duo ei, ei commodo honestatis pri. 
					Ei sit ignota possit, ex vidisse iracundia his. 
					Eu propriae salutandi est. 
					Pro possim tibique at, at usu simul lobortis. 
					Latine incorrupte disputationi ad vel, integre detracto ei qui. 
					Sit ut illud scripta scribentur, has fastidii invenire voluptatibus in.</p>
				</content>
			</article>
			
			<article>
				<header class="article-header">
					<h1><a href="#">Second Article</a></h1>
				</header>
				
				<footer>
					<p class="post-info">by iRock</p>
				</footer>
				
				<content>
					<p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec. 
					Ius harum lobortis ex, paulo iuvaret argumentum his ex. 
					Vel ne vocibus menandri constituto. 
					Populo salutatus patrioque est in. 
					Id laoreet propriae consulatu mel. 
					Assum prodesset at eos, ius at tota dolorum adversarium. 
					Ad inani impetus impedit duo, an quo tempor laoreet.</p>

					<p>Tantas similique eum id, idque veniam duo ei, ei commodo honestatis pri. 
					Ei sit ignota possit, ex vidisse iracundia his. 
					Eu propriae salutandi est. 
					Pro possim tibique at, at usu simul lobortis. 
					Latine incorrupte disputationi ad vel, integre detracto ei qui. 
					Sit ut illud scripta scribentur, has fastidii invenire voluptatibus in.</p>
				</content>
			</article>
			
		</section>
		
		
		<!-- SIDEBAR -->
		<aside class="sidebar">
			<article>
				<h1><a href="#">Sidebar Article 1</a></h1>
				<p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec. 
					Ius harum lobortis ex, paulo iuvaret argumentum his ex.</p>
			</article>
			
			<article>
				<h1><a href="#">Sidebar Article 2</a></h1>
				<p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec. 
					Ius harum lobortis ex, paulo iuvaret argumentum his ex.</p>
			</article>
			
			<article>
				<h1><a href="#">Sidebar Article 3</a></h1>
				<p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec. 
					Ius harum lobortis ex, paulo iuvaret argumentum his ex.</p>
			</article>
		</aside>
		
		
		<!-- FOOTER -->
		<footer class="main-footer">
			<p>Copyright &copy; Øystein Jacobsen</p>
		</footer>
	</body>
</html>

【问题讨论】：

标签： jquery html css drop-down-menu jquery-hover

【解决方案1】：

老实说，我看不出有什么不对。鼠标悬停和鼠标悬停的工作方式相同。我正在使用最新的 chrome。剧本也没有错。无论如何，我不推荐登录这样的解决方案，它会让你的客人感到沮丧;）

【讨论】：

【解决方案2】：

不幸的是，height 不是一个非常高效的动画 CSS 属性（这是 slideToggle() 在幕后所做的），即使您使用的是 CSS 动画而不是 jQuery。这是因为浏览器必须重新计算布局，重新绘制受影响的区域（甚至可能是整个页面），然后重新合成图层。从本质上讲，它必须做很多工作，并且很难做到每秒 60 次，因此我们认为它是一个流畅的动画——假设它每秒只能做 15 次，我们认为“卡顿”或“滞后”。这当然会在每台查看您网站的计算机上有所不同；功能更强大的机器会看到流畅的动画，但功能较弱的机器（例如手机）会更难。

如果您想要更高效的动画，您可以为opacity 设置动画（最好使用 CSS 而不是 jQuery）。当浏览器动画opacity 时，它只需要重新合成，不重新计算布局和重新绘制。以每秒 60 帧的速度执行此操作要容易得多。所以你可以淡入淡出你的表单，而不是让它上下滑动。

【讨论】：