更改鼠標移過來的字體大小，在鼠標離開時還原爲原始

Question

我正試圖編寫一個函數，當鼠標進入時它可以改變元素的字體大小，並將其恢復爲原始字體大小當鼠標離開它時。這是我的：

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

它改變鼠標的字體大小，但是當鼠標離開時，它只是保持相同的大小。 （在字體大小更改之後，我做了一個警告（大小），並且它保存了正確的值。）我在這裏做錯了什麼？

Answer 1

據我瞭解，這將有助於你

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

或通過CSS，你可以這樣做：盤旋狀

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

Answer 2

你可以用CSS實現這一點很容易：

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

但是，在jQuery中你可以這樣做：

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

See jsfiddle。請注意，我用ems因爲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

Answer 3

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

Answer 4

你可以做到這一點有兩種方式：

從jQuery的動畫功能：

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

並從CSS

a{ 
    font-size:16px; 
} 

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

Answer 5

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

}