我正在编写一个带有下拉登录脚本的网页。 我在列表项上使用jquery slideToggle（）来显示悬停时的登录表单。
有人可以告诉我为什么我的下拉表格在我鼠标时会感到生涩/摇晃吗？
P.S。登录＆＃34;按钮＆＃34;将不会显示在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 © Øystein Jacobsen</p>
</footer>
</body>
</html>
答案 0 :(得分：0)
说实话，我没有看错。鼠标悬停和鼠标移除工作相同。 我正在使用最新的chrome。剧本中也没有错。 无论如何，我不推荐这样的解决方案作为登录，它会让你的客人感到沮丧;）
答案 1 :(得分：0)
不幸的是，height不是一个非常高效的动画CSS属性（这是slideToggle()在幕后做的事情），即使您使用的是CSS动画而不是jQuery。这是因为浏览器必须重新计算布局，重新绘制受影响区域（或者甚至整个页面），然后重新组合图层。从本质上讲，它必须做很多工作，并且可能很难每秒执行60次，这样我们就可以将其视为一个平滑的动画 - 假设它只能每秒执行15次，我们认为“jank”或“lag”。当然，每台浏览您网站的计算机都会有所不同;更强大的机器将看到平滑的动画，但功能较差的机器（例如手机）将会有更难的时间。
如果你想要一个更高性能的动画，你可以动画opacity，（最好用CSS而不是jQuery）。当浏览器为opacity设置动画时，它只需重新合成，不重新计算布局并重新绘制。以每秒60帧的速度更容易做到这一点。因此，您可以淡入淡出您的表单，而不是让它上下滑动。