CODEWITHSUNDEEP
javascriptjquery
Mushy
Mushy

Reputation: 172

Change font-size on mouse over, revert to original on mouse leave

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?

Upvotes: 0

Views: 4723

Answers (5)

Francisco Presencia
Francisco Presencia

Reputation: 8860

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

Upvotes: 6

sachin
sachin

Reputation: 14375

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

 }

Upvotes: 0

webGautam
webGautam

Reputation: 565

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

Upvotes: 0

sachin
sachin

Reputation: 14375

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

Upvotes: 1

GautamD31
GautamD31

Reputation: 28753

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

Upvotes: 2

Related Questions