jQuery animate() on hover navigation menu

Question

I am just a beginner in jQuery. I would like to add an animation on my navigation menu. What I want is, I want to hide the menu item text initially and on hover the menu item font size should also increase as it zooms out.Also it should go back to the initial size when the mouse leaves the menu item.How can I change my code to accomplish this? Please help me. Here is my code:

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

(offtopic criticism) At first might seem like quite a nice menu... but think twice. Be always concerned about mobile users, desktop users, User-Interface, User-Experience and User-Expectance after all. This one misses all the good things one should expect from a menu — Roko C. Buljan, Aug 20 '15 at 18:42

Pete · Accepted Answer · 2015-08-19T12:36:38.793

0

If you are only trying to expand and retract the block you are on you can do something like this (if you want the whole block to expand then change $(this) to $('.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>

edited Aug 19 '15 at 12:36

answered Aug 19 '15 at 11:49

Pete

57,112
28
117
166

Thank you for the help. How to hide the text initially and also I want to animate each menu item separately. – Aruna Jithin Aug 19 '15 at 11:56
See edit to answer, I have just set the font size to start at 0 – Pete Aug 19 '15 at 11:57
How can I increase the font size of anchor tag? Also while hovering a menu item, only that menu item needs to be animated while the others stay back with the same size. – Aruna Jithin Aug 19 '15 at 12:07
Thank you so much. One more thing. How to change the background color ? – Aruna Jithin Aug 19 '15 at 12:44
animating background colour is a bit more difficult, you should look at this post: http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor – Pete Aug 19 '15 at 12:47
I found it difficult to integrate. So I add like this $(".menu_block").hover(function() { $(this).stop().animate({ 'width': '127px', 'height': '34px', 'font-size': '20px', 'backgroundColor': '#819A97' }, 1500 ); }, function() { $(this).stop().animate({ 'width': '35px', 'height': '6px', 'font-size': '0px', 'backgroundColor': '#33BEB1' }, 1500); }); – Aruna Jithin Aug 19 '15 at 12:55
Also by adding this script This worked – Aruna Jithin Aug 19 '15 at 12:56
There is one more thing. How to keep the menu items which are not hovered from moving or animating? – Aruna Jithin Aug 19 '15 at 13:00
They will need to move to make space for the one that is animating (and if you have just moused out of it, it will animate the closing sequence) other than thyose movements, I don't see anything else moving – Pete Aug 19 '15 at 13:03
1

Oh sorry. Its fixed. Its a refreshing problem. Thanks a ton. – Aruna Jithin Aug 19 '15 at 13:04

score 0 · Answer 2 · answered Aug 19 '15 at 11:51

You can just add a mouseout event in your javascript like so:

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

Complete html: https://gist.github.com/anonymous/0aa59ba4796df2d76f39
jsbin: https://jsbin.com/vogowacevo

jQuery animate() on hover navigation menu

2 Answers2