jQuery 悬停导航菜单上的 animate()

Question

我只是 jQuery 的初学者。我想在我的导航菜单上添加一个动画。我想要的是，我想最初隐藏菜单项文本，并且在悬停时菜单项字体大小也应该随着它的缩放而增加 out.Also 当鼠标离开菜单时它应该回到初始大小 item.How 我可以更改我的代码来完成这个吗？请帮我。这是我的代码：

$(document).ready(function() {
 $(".menu_block").hover(function(){
    $(this).animate({'width': '127px', 'height': '34px'}, 1500);
   }, function(){
    $(this).animate({'width': '35px', 'height': '6px'}, 1500);
   });

  });

.navigation{
    position: fixed;
    right: 50%;
    top: 60px;
 z-index: 9999;
}

.menu_block{
 background: #33BEB1;
 width: 35px;
 height: 6px;
 margin-bottom: 6px;
    display: block;
}

.menu_block a{ color: #33BEB1; display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="navigation">
         <ul>
             <li class="menu_block"><a href="#about">about</a></li>
                <li class="menu_block"><a href="#services">services</a></li>
                <li class="menu_block"><a href="#contact">contact</a></li>
            </ul>
        </nav>

Answer 1

如果您只是想展开和缩回您所在的方块，您可以这样做（如果您希望整个方块展开，然后将 $(this) 更改为 $('.menu_block')）：

$(".menu_block").hover(function() {
  $(this).stop().animate({
    'width': '127px',
    'height': '34px',
    'font-size': '20px' // set your large font-size here
  }, 1500);
}, function() {
  $(this).stop().animate({
    'width': '35px',
    'height': '6px',
    'font-size': '0px'
  }, 1500);

});

.navigation {

  position: fixed;
  right: 50%;
  top: 60px;
  z-index: 9999;
}
.menu_block {
  background: #33BEB1;
  width: 35px;
  height: 6px;
  margin-bottom: 6px;
  display: block;
  font-size: 0px;
  margin-left:auto;
}
.menu_block a {
  color: #ffffff;
  display: block;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="navigation">
  <ul>
    <li class="menu_block"><a href="#about">about</a>
    </li>
    <li class="menu_block"><a href="#services">services</a>
    </li>
    <li class="menu_block"><a href="#contact">contact</a>
    </li>
  </ul>
</nav>

Answer 2

您可以像这样在 javascript 中添加一个 mouseout 事件：

$(document).ready(function() {
  $(".menu_block")
    .hover(function(){
      $('.menu_block').stop().animate({'width': '127px', 'height': '34px'}, 1500);
    })
    .mouseout(function () {
      $('.menu_block').stop().animate({'width': '35px', 'height': '6px'}, 1500);
    });
  });

完成 html：https://gist.github.com/anonymous/0aa59ba4796df2d76f39
jsbin: https://jsbin.com/vogowacevo

jQuery 悬停导航菜单上的 animate()

jQuery animate() on hover navigation menu

html

css

jquery

css-transitions

jquery-animate