jQuery - Animate on hover

Question

I know this is likely to be closed as a duplicate, but still I didn't manage to find an answer to my problem in all the similar questions.

I want to animate() an element on my page (through jQuery, you had guessed) on mouse hover. What I did was:

$('blockquote').hover(function() {
    console.log($(this));
    $(this).animate({textSize: '+=10px'}, 500);
}, function() {
    $(this).animate({textSize: '-=10px'}, 500);
});

The console.log logs this:

[blockquote#daily_quote, context: blockquote#daily_quote, jquery: "1.9.1", constructor: function, init: function, selector: ""…]

Both functions inside hover get called, $(this) gets logged but nothing animates.

Answer 1

This may be help you.
$('blockquote').hover(function() {

        $(this).animate({left: '+=10px'}, 700);
    }, function() {
        $(this).animate({left: '-=10px'}, 700);
    });

you can use any property instead of left

Answer 2

Use fontSize:

$('blockquote').hover(function() {
    // console.log($(this));
    $(this).animate({fontSize: '+=10px'}, 500);
}, function() {
    $(this).animate({fontSize: '-=10px'}, 500);
});