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

【问题标题】：jQuery animate() on hover navigation menu悬停导航菜单上的 jQuery animate()
【发布时间】：2015-11-12 16:24:36
【问题描述】：

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

$(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>

【问题讨论】：

（题外话批评）起初可能看起来不错的菜单...但三思而后行。毕竟，始终关注移动用户、桌面用户、用户界面、用户体验和用户期望。这一个错过了人们应该从菜单中得到的所有好处

标签： jquery html css jquery-animate css-transitions

【解决方案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>

【讨论】：

感谢您的帮助。如何最初隐藏文本，并且我想分别为每个菜单项设置动画。
查看编辑回答，我刚刚将字体大小设置为从 0 开始
如何增加锚标签的字体大小？同样，当悬停菜单项时，只有该菜单项需要动画，而其他菜单项保持相同大小。
非常感谢。还有一件事。如何更改背景颜色？
抱歉。它是固定的。这是一个令人耳目一新的问题。非常感谢。

【解决方案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

【讨论】：