0
我正在用下拉登錄腳本編寫一個網頁。 我在列表項上使用jquery slideToggle（）來顯示懸停時的登錄表單。爲什麼我的jquery slideToggle下拉列表不穩定/抖動？
任何人都可以告訴我爲什麼我的dropdown表單在我mouseof的時候感到生澀/搖擺不定？
P.S.登錄「按鈕」將不會被625px和750px之間
$("#login").hover(function() {
\t $("#login-form").slideToggle();
});body {
\t background: gray url("../img/bg-default.png") no-repeat;
\t background-size: cover;
\t font-size: 85%;
\t font-family: Arial, 'Lucicda Sans Unicode';
\t line-height: 1.5;
\t text-align: left;
\t margin: 0 auto;
\t width: 70%;
\t clear: both;
}
a {
\t color: #474E69; /*#CF5C3F;*/
\t text-decoration: none;
}
a:link, a:visited {
\t color: #474E69; /*#CF5C3F;*/
}
a:hover, a:active {
\t color: white;
\t background-color: #474E69; /*#CF5C3F;*/
\t border-radius: 5px;
\t -moz-border-radius: 5px;
\t -webkit-border-radius: 5px;
}
/* HTML4 FALLBACK */
header, section, footer, aside, nav, main, article, figure {
display: block;
}
/* HEADER */
.main-header img {
\t width: 100%;
\t height: auto;
}
/* NAVIGATION */
.navigation {
\t background-color: #666;
\t height: 40px;
\t border-radius: 5px;
\t -moz-border-radius: 5px;
\t -webkit-border-radius: 5px;
\t margin-bottom: 2%;
\t padding-right: 40px;
}
.navigation ul {
\t list-style: none;
\t margin: 0 auto;
}
.navigation ul.main-nav li {
\t float: left;
\t display: inline;
}
.navigation ul.ext-nav li {
\t float: right;
\t display: inline;
}
.navigation ul li a {
\t border-radius: 5px;
\t -moz-border-radius: 5px;
\t -webkit-border-radius: 5px;
}
.navigation a:link, .navigation a:visited {
\t color: white;
\t display: inline-block;
\t padding: 10px 20px;
\t height: 20px
}
.navigation a:hover, .navigation a:active, .navigation .active a:link, .navigation .active a:visited {
\t background-color: #474E69; /*#CF5C3F;*/
\t text-shadow: none;
}
/* CONTENT */
.main-content {
\t width: 70%;
\t float: left;
\t line-height: 25px;
}
.main-content article {
\t background-color: white;
\t border-radius: 5px;
\t -moz-border-radius: 5px;
\t -webkit-border-radius: 5px;
\t padding: 2% 5%;
\t margin-bottom: 3%;
}
.main-content .post-info {
\t font-style: italic;
\t font-size: 80%;
\t color: #999;
}
/* SIDEBAR */
.sidebar {
\t width: 28%;
\t float: left;
\t margin-left: 2%;
}
.sidebar article {
\t background-color: white;
\t border-radius: 5px;
\t -moz-border-radius: 5px;
\t -webkit-border-radius: 5px;
\t padding: 2% 5%;
\t margin-bottom: 8%;
}
/* FOOTER */
.main-footer {
\t width: 100%;
\t height: 40px;
\t float: left;
\t clear: both;
\t margin-bottom: 2%;
\t text-align: center;
\t color: white;
\t background-color: #666;
\t border-radius: 5px;
\t -moz-border-radius: 5px;
\t -webkit-border-radius: 5px;
}
.main-footer p {
\t margin: 10px auto;
}
/* login.css */
#login-form {
\t position: absolute;
\t right: 15%;
display: none;
float: right;
clear: both;
background-color: #666;
padding: 0 2% 2% 2%;
\t border-radius: 5px;
\t -moz-border-radius: 5px;
\t -webkit-border-radius: 5px;
}
#login-form .text {
\t 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) { \t
\t .navigation ul.ext-nav {
\t \t display: none;
\t }
\t
\t .navigation {
padding-right: 0;
\t }
}
/* SCREENS BETWEEN 150px & 600px */
@media only screen and (max-width: 625px) {
\t body {
\t \t width: 90%;
\t \t font-size: 95%;
\t }
\t
\t .navigation {
\t \t height: 200px;
padding-right: 0;
\t }
\t
\t .navigation ul {
\t \t padding-left: 0;
\t }
\t
\t .navigation ul li {
\t \t width: 100%;
\t \t text-align: center;
\t }
\t
\t .navigation a:link, .navigation a:visited {
\t \t padding: 10px 25px;
\t \t height: 20px;
\t \t display: block;
\t }
#login-form {
width: 86%;
right: 5%;
}
\t \t
\t .main-content {
\t \t width: 100%;
\t }
\t
\t .main-content article {
\t \t margin-bottom: 2%;
\t }
\t
\t .post-info {
\t \t display: none;
\t }
\t
\t .sidebar {
\t \t width: 100%;
\t \t margin-left: 0;
\t }
\t
\t .sidebar article {
\t \t padding: 2% 3%;
\t \t margin-bottom: 2%;
\t }
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>iRock.no</title>
\t \t
\t \t <meta charset="utf-8" />
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0" />
\t \t
\t \t <link rel="stylesheet" type="text/css" href="css/main.css" />
\t \t <link rel="stylesheet" type="text/css" href="css/mobile.css" />
\t \t <link rel="stylesheet" type="text/css" href="css/login.css" />
\t \t
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
\t \t <script src="script/login.js"></script>
\t \t <!-- IE9 AND LESS HTML5 SUPPORT -->
\t \t <!--[if lt IE 9]>
\t \t \t <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
\t \t <![endif]-->
\t </head>
\t <body>
\t
\t \t <!-- HEADER -->
\t \t <header class="main-header">
\t \t \t <img alt="Header" src="http://lorempixel.com/1280/300/iRock-3ngineering/">
\t \t </header>
\t \t
\t \t
\t \t <!-- NAVIGATION -->
\t \t <nav class="navigation">
\t \t \t <ul class="main-nav">
\t \t \t \t <li class="active"><a href="#">Home</a></li>
\t \t \t \t <li><a href="#">Workspace</a></li>
\t \t \t \t <li><a href="#">About</a></li>
\t \t \t \t <li><a href="#">Contact</a></li>
\t \t \t </ul>
\t \t \t
\t \t \t <ul class="ext-nav">
\t \t \t \t <li id="login">
\t \t \t \t \t <a href="#" margin-right="40px">login</a>
\t \t \t \t \t <form id="login-form" action="script/login.php" method="post">
\t \t \t <p><input class="text" type="text" name="username" placeholder="username" /></p>
\t \t \t <p><input class="text" type="password" name="password" placeholder="password" /></p>
\t \t \t <p><input class="submit" type="submit" value="submit" /></p>
\t \t \t \t \t </form>
\t \t \t \t </li>
\t \t \t \t
\t \t \t </ul>
\t \t </nav>
\t \t
\t \t
\t \t <!-- CONTENT -->
\t \t <section class="main-content">
\t \t \t <!-- TODO: program article generator -->
\t \t \t <article>
\t \t \t \t <header class="article-header">
\t \t \t \t \t <h1><a href="#">First Article</a></h1>
\t \t \t \t </header>
\t \t \t \t
\t \t \t \t <footer>
\t \t \t \t \t <p class="post-info">by iRock</p>
\t \t \t \t </footer>
\t \t \t \t
\t \t \t \t <content>
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec.
\t \t \t \t \t Ius harum lobortis ex, paulo iuvaret argumentum his ex.
\t \t \t \t \t Vel ne vocibus menandri constituto.
\t \t \t \t \t Populo salutatus patrioque est in.
\t \t \t \t \t Id laoreet propriae consulatu mel.
\t \t \t \t \t Assum prodesset at eos, ius at tota dolorum adversarium.
\t \t \t \t \t Ad inani impetus impedit duo, an quo tempor laoreet.</p>
\t \t \t \t \t <p>Tantas similique eum id, idque veniam duo ei, ei commodo honestatis pri.
\t \t \t \t \t Ei sit ignota possit, ex vidisse iracundia his.
\t \t \t \t \t Eu propriae salutandi est.
\t \t \t \t \t Pro possim tibique at, at usu simul lobortis.
\t \t \t \t \t Latine incorrupte disputationi ad vel, integre detracto ei qui.
\t \t \t \t \t Sit ut illud scripta scribentur, has fastidii invenire voluptatibus in.</p>
\t \t \t \t </content>
\t \t \t </article>
\t \t \t
\t \t \t <article>
\t \t \t \t <header class="article-header">
\t \t \t \t \t <h1><a href="#">Second Article</a></h1>
\t \t \t \t </header>
\t \t \t \t
\t \t \t \t <footer>
\t \t \t \t \t <p class="post-info">by iRock</p>
\t \t \t \t </footer>
\t \t \t \t
\t \t \t \t <content>
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec.
\t \t \t \t \t Ius harum lobortis ex, paulo iuvaret argumentum his ex.
\t \t \t \t \t Vel ne vocibus menandri constituto.
\t \t \t \t \t Populo salutatus patrioque est in.
\t \t \t \t \t Id laoreet propriae consulatu mel.
\t \t \t \t \t Assum prodesset at eos, ius at tota dolorum adversarium.
\t \t \t \t \t Ad inani impetus impedit duo, an quo tempor laoreet.</p>
\t \t \t \t \t <p>Tantas similique eum id, idque veniam duo ei, ei commodo honestatis pri.
\t \t \t \t \t Ei sit ignota possit, ex vidisse iracundia his.
\t \t \t \t \t Eu propriae salutandi est.
\t \t \t \t \t Pro possim tibique at, at usu simul lobortis.
\t \t \t \t \t Latine incorrupte disputationi ad vel, integre detracto ei qui.
\t \t \t \t \t Sit ut illud scripta scribentur, has fastidii invenire voluptatibus in.</p>
\t \t \t \t </content>
\t \t \t </article>
\t \t \t
\t \t </section>
\t \t
\t \t
\t \t <!-- SIDEBAR -->
\t \t <aside class="sidebar">
\t \t \t <article>
\t \t \t \t <h1><a href="#">Sidebar Article 1</a></h1>
\t \t \t \t <p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec.
\t \t \t \t \t Ius harum lobortis ex, paulo iuvaret argumentum his ex.</p>
\t \t \t </article>
\t \t \t
\t \t \t <article>
\t \t \t \t <h1><a href="#">Sidebar Article 2</a></h1>
\t \t \t \t <p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec.
\t \t \t \t \t Ius harum lobortis ex, paulo iuvaret argumentum his ex.</p>
\t \t \t </article>
\t \t \t
\t \t \t <article>
\t \t \t \t <h1><a href="#">Sidebar Article 3</a></h1>
\t \t \t \t <p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec.
\t \t \t \t \t Ius harum lobortis ex, paulo iuvaret argumentum his ex.</p>
\t \t \t </article>
\t \t </aside>
\t \t
\t \t
\t \t <!-- FOOTER -->
\t \t <footer class="main-footer">
\t \t \t <p>Copyright © Øystein Jacobsen</p>
\t \t </footer>
\t </body>
</html>