I'm trying to write a function that changes the font-size of an element when the mouse enters it, and revert it back to its original font-size when the mouse leaves it. This is what I have:

   $(".month").hover(function(){

        var size = $(this).css("font-size");

        $(this).stop().animate({
            fontSize: start_font + font_off,
            opacity: '1'
        }, 200);    

    },function(){

        $(this).stop().animate({
            fontSize: size,
            opacity: '1'
        }, 200);
    });

It changes the font size on mouse in, but when the mouse leaves, it just stays the same size. (I did an alert(size) after the font-size change, and it holds the correct value.) What am I doing wrong here?

I'm trying to write a function that changes the font-size of an element when the mouse enters it, and revert it back to its original font-size when the mouse leaves it. This is what I have:

   $(".month").hover(function(){

        var size = $(this).css("font-size");

        $(this).stop().animate({
            fontSize: start_font + font_off,
            opacity: '1'
        }, 200);    

    },function(){

        $(this).stop().animate({
            fontSize: size,
            opacity: '1'
        }, 200);
    });

It changes the font size on mouse in, but when the mouse leaves, it just stays the same size. (I did an alert(size) after the font-size change, and it holds the correct value.) What am I doing wrong here?

• javascript
• jquery

Share Improve this question Follow asked May 27, 2013 at 5:59 MushyMushy 17211 gold badge22 silver badges1313 bronze badges 7

• What are start_font , font_off – GautamD31 Commented May 27, 2013 at 6:00
• 2 Why not use CSS3 transitions and let it degrade gracefully? – elclanrs Commented May 27, 2013 at 6:00
• I put var start_font = 50; var font_off = 8; at the top of page (outside the function) – Mushy Commented May 27, 2013 at 6:01
• That means default font size is 50..?? – GautamD31 Commented May 27, 2013 at 6:01
• @elclanrs I'm trying to practice with jQuery. – Mushy Commented May 27, 2013 at 6:02

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 6

You can achieve this easily with CSS:

.month:hover {
  font-size: 150%;
  }

However, in jquery you can do:

$(".month").hover(function(){
  $(this).
    stop().
    animate({
      fontSize: "5em"
      }, 1000);
  },
  function(){
    $(this).
      stop().
      animate({
        fontSize: "1em"
        }, 1000);
    }
  );

See jsfiddle. Note, I've used ems since The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Source

As I understand this will help you

$(".month").hover(function(){

    var size = $(this).css("font-size");

    $(this).stop().animate({
        fontSize: start_font + font_off,
        opacity: '1'
    }, 200);    

},function(){
    var size = $(this).css("font-size");      //Add this
    $(this).stop().animate({
        fontSize: size - font_off,   
        opacity: '1'
    }, 200);
});

or through the css you can do with :hover like

.month:hover {
   font-size: 150%;
}

  $(".month").hover(function(){
    var size = $(this).css("font-size");
    alert(size); 
   $(this).stop().animate({
        fontSize: start_font + font_off,
        opacity: '1'
    }, 200);    

},function(){

    $(this).stop().animate({
        fontSize: size,//In this line u r getting error as size not defined 
        opacity: '1'
    }, 200);
    alert('leaving '+size);
});

You can do it in two ways:

From Jquery animate function:

$('#my-list li').hover(function() {
      $(this).stop().animate({ fontSize : '20px' });
},
function() {
      $(this).stop().animate({ fontSize : '12px' });
});

And From CSS

a{
    font-size:16px;
}

a:hover {
    font-size:18px;
}

$(".month").hover(function(){

 if($('#month').hasClass('hoverout')){

   $(this).removeClass("hoverout");
 }

   $(this).addClass("hoverin");
   $(this).stop().animate({
        opacity: '1'
    }, 200);    

},function(){

     if($('#month').hasClass('hoverin')){

            $(this).removeClass("hoverin");
      }

     $(this).addClass("hoverout");

    $(this).stop().animate({
        opacity: '1'
    }, 200);

});

css

.hoverin{

   font-size:20px;
}

.hoverout{

  font-size:50px;

 }