如何在 jquery 动画中停止字体闪烁和消失。答案

【问题标题】：How to stop font flickering & dissapering in jquery animation.如何在 jquery 动画中停止字体闪烁和消失。
【发布时间】：2015-09-30 18:44:58
【问题描述】：

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);

【问题讨论】：

我还希望字体(class="nav") 与菜单栏一起移动。
让我知道您是否正在尝试这样做，您甚至可能不需要 jQuery，只需要 css 和 html

标签： jquery html css animation jquery-animate

【解决方案1】：

这可能是你想要做的：

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>

【讨论】：

您订购 css 的方式更有意义。我能够调整一些东西，现在它按我的预期工作。谢谢。
这个问题是动画动作也会移动“box-5”。我希望 box2-4 能够独立移动，这就是我尝试使用高度的原因。
上面的sn-p代码你运行了吗？在整页中。如果我理解正确，您希望 box-5 保持在中间而没有悬停效果，其余部分向上移动一点以隐藏黑条？
"margin-top": "-20px" 我希望条形图向下移动("margin-top": "20px" ) 而不是向上移动，当我改变它时它会移动 box-5跨度>
@sasuma 在我的浏览器上，上面答案中的代码没有移动 box-5