jQuery の animateメソッドが機能しない

jQueryのanimateメソッドがどうも反応しない（まったく動かない）状態です。
挙動としてはcssのhoverだけ効いている状態です。

調べてみてもよくかわらなかったので、アドバイスを頂けるとありがたいです。

html
1<div class="product">
2          <div class="container">  
3           <div class="product-title">
4            <h1>商品情報</h1>
5           </div>
6           <div class="product-lists">
7            <div class=list>
8              <img src="***" alt="">
9              <p>商品名</p>
10            </div>
11           <div class=list>
12              <img src="***" alt="">
13              <p>商品名</p>
14            </div>
15           </div> 
16          </div>
17         </div>  
18

css
1.product{
2    width: 1000px;
3    height: 500px;
4    text-align: center;
5}
6
7.product-title h1{
8    font-weight: normal;
9    color: #000000;
10    font-size: 28px;
11    font-family: "ヒラギノ明朝 Pro W5", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho","Sawarabi Mincho", serif;
12    margin: 14px 14px;
13    border-bottom: 1px solid #ff4b57;
14    display: inline-block;
15    padding-top: 100px; 
16    margin: 0 auto;
17}
18
19.list{
20    padding-top: 30px;
21    padding-right: 25px;
22    padding-left: 25px;
23    float: center;
24    display: inline-block;
25}
26
27.list img{
28    width: 140px;
29    height: 170px;
30    border-radius: 5px;
31    cursor: pointer;
32}
33
34.list img:hover{
35    opacity: 0.5;
36}
37    
38

jQuery
1$('.list img').hover(
2     function(){
3     $(this).animate({
4          'font-size': '150px'
5     }, 300);
6},
7function(){
8     $(this).animate({
9          'font-size': '140px'
10     }, 300);
11}
12);