http://codepen.io/anon/pen/ojBZZo 我遇到了麻烦。字体闪烁然后在动画后消失。我已经提供了 html 和 css。我认为问题出在我构建 div 的方式上。或许。请帮忙。
<body>
<div id="container">
<div id="box-2" class="box">
<div class="menu-bar">
<p class="nav">CONTACT</p>
</div>
</div>
<div id="box-3" class="box">
<div class="menu-bar">
<p class="nav">PROFOLIO</p>
</div>
</div>
<div id="box-4" class="box">
<div class="menu-bar">
<p class="nav">ABOUT ME</p>
</div>
</div>
<div id="box-5">
<div>
<h1>JAMES BLUNT</h1>
<P>EXPERT ROLLER</P>
</div>
</div>
</div>
</body>
body{
color:#fff;
font-family: 'Open Sans', sans-serif;
}
html {-webkit-font-smoothing: antialiased}
.box {
}
html, body, #container {
margin:0px auto;
height:500px;
width:auto;
background-color:#0ee3b8;
}
#box-2 {
float:right;
width: 21%;
height: 100px;
outline: 1px solid olive;
}
#box-3 {
float:right;
width: 22%;
height: 100px;
outline: 1px solid fuchsia;
}
#box-4 {
float:right;
width: 22%;
height: 100px;
outline: 1px solid maroon;
}
#box-5 {
padding-top:200px;
clear:both;
text-align:center;
width: 100%;
height: 300px;
outline: 1px solid maroon;
}
.menu-bar {
padding-top:0;
margin-top:0;
height:10px;
width:125px;
background:#000;
position:relative;
}
.nav {
margin:0px;
padding-top:25px;
font-size:13px;
float:right;
color:#000;
}
h1{
margin:0;
text-shadow: 1px 1px #000;
}
p{
color:#666666;
}
var main = function(){
$(".menu-bar").hover(function(){
$(this).animate({ height: "20px" }, {queue: false});
}, function() {
$(this).animate({ height: "10px" }, {queue: false});
});
}
$(document).ready(main);
最佳答案
这可能是您想要做的:
var main = function() {
$("#box-2, #box-3, #box-4").hover(function() {
$(this).find('div').animate({
"margin-top": "20px"
}, {
queue: false
});
}, function() {
$(this).find('div').animate({
"margin-top": "10px"
}, {
queue: false
});
});
}
$(document).ready(main);body {
color: #fff;
font-family: 'Open Sans', sans-serif;
}
html {
-webkit-font-smoothing: antialiased
}
.box {} html,
body,
#container {
margin: 0px auto;
height: 500px;
width: auto;
background-color: #0ee3b8;
}
#box-2,
#box-3,
#box-4 {
float: right;
width: 21%;
height: 100px;
border: 1px solid olive;
}
#box-5 {
padding-top: 200px;
clear: both;
text-align: center;
width: 100%;
height: 300px;
outline: 1px solid maroon;
}
.menu-bar {
padding-top: 0;
margin-top: 0;
height: 10px;
width: 125px;
background: #000;
position: relative;
}
.nav {
margin: 0px;
padding-top: 25px;
font-size: 13px;
float: right;
color: #000;
}
h1 {
margin: 0;
text-shadow: 1px 1px #000;
}
p {
color: #666666;
}
var main=function() {
$(".menu-bar").hover(function() {
$(this).animate( {
height: "20px"
}
,
{
queue: false
}
);
}
,
function() {
$(this).animate( {
height: "10px"
}
,
{
queue: false
}
);
}
);
}<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div id="box-2" class="box">
<div class="menu-bar">
<p class="nav">CONTACT</p>
</div>
</div>
<div id="box-3" class="box">
<div class="menu-bar">
<p class="nav">PROFOLIO</p>
</div>
</div>
<div id="box-4" class="box">
<div class="menu-bar">
<p class="nav">ABOUT ME</p>
</div>
</div>
<div id="box-5">
<div>
<h1>SAM ASUMA</h1>
<P>WEB DEVELOPER</P>
</div>
</div>
</div>
</body>关于jquery - 如何在 jquery 动画中停止字体闪烁和消失。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32861303/