Question

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

Answer 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>

如何阻止字体闪烁＆amp;在jquery动画中消失。

1 个答案: