Question

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

＆＃13;

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

＆＃13;

.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; }

＆＃13;

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

＆＃13;

Answer 1

如果您只是尝试展开和撤消您所在的块，则可以执行以下操作（如果您希望整个块展开，则将$(this)更改为$('.menu_block')）：

＆＃13;

$(".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);

});

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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（）

2 个答案: