Question

我正在寻找一种方法来保持navitems 2和3的移动而navitem 1在鼠标输入时通过它的动画然后离开是否有人知道如何做到这一点？是否有可能按照我尝试的方式做到这一点？

这是我的HTML

<html>
<head>
  <title>Art Profile</title>
  <script src="jquery-3.1.1.js"></script>
  <script type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" href="main.min.css" type="text/css" media="screen">
</head>
<body>
  <div class="navbar">
    <div class="navitem" id="navitem1">
      <div id="navtext1">
        Work
      </div>
    </div>
    <div class="navitem" id="navitem2">
      Home
    </div>
    <div class="navitem" id="navitem3">
      Contact
    </div>
  </div>
</body>
</html>

我的JQuery

$(document).ready(function(){
  $('#navitem1').mouseenter(function(){
    $('#navitem1').animate({
      height: '+=25px',
      width: '+=20px',
    }).css({
      'border-top': '7px solid #008cb1'});
    $('#navtext1').css({
      'line-height': '3.5em',
      '-ms-transition':'.3s',
      '-moz-transition':'.3s',
      '-webkit-transition':'.3s'
    });
  }).mouseleave(function(){
    $('#navitem1').animate({
      height: '-=25px',
      width: '-=20px',
    }).css({
      'border-top': '4px solid #008cb1'});
    $('#navtext1').css({
      'line-height': '2.5em',
      '-ms-transition':'.3s',
      '-moz-transition':'.3s',
      '-webkit-transition':'.3s'
    });
  });
});

CSS

body {
  font-family: helvetica;
  background: #101010;
  margin: 0;
  padding: 0;
}

.navbar {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.navitem {
  display: inline-block;
  min-height: 50px;
  min-width: 110px;
  background-color: #383838;
  color: #008cb1;
  font-size: 18px;
  border-top: 4px solid #008cb1;
  line-height: 2.5em;

}

Answer 1

您必须删除宽度动画或找到一种方法，使菜单元素保持居中和对齐，而不使用内联块。请查看下面的小提琴作为示例。

请注意，您还应该删除排队的动画：

$('#navitem1').stop()

检查更新的小提琴：

JSFIDDLE

保持其他div与动画分开

1 个答案: