How to animate font-size on mouseenter

Question

I have issues animating the font-size on element mouseenter:

demo fiddle

HTML :

<p>Hello!</p>

Javascript :

$(document).ready(function () {
("p").mouseenter(function () {
    ("p").animate({
        "font-size": "50px"
    });
});

Answer 1

("p") should be $("p")
You're missing an });
and you're not using the jQuery library

$(document).ready(function () {
    $("p").mouseenter(function () {
        $(this).animate({"font-size": "50px"});
    });
});

Fiddle DEMO

A slightly nicer way to write the same would be:

jQuery(function($) {  // DOM ready shorthand

    $("p").mouseenter(function() {
        $(this).animate({ fontSize : 50 });
    });

});

_{Remember to always keep reference to the targeted Object Element $(this) to get the desired result.}

Answer 2

you must use $ sign in your code try this code. i tested.

 $(document).ready(function () {
            $("p").mouseenter(function () {
                $(this).animate({
                    "font-size": "50px"
                });
            });
        });

Answer 3

You are missing the }); and $ signs, and the jQuery library in your fiddle.

http://jsfiddle.net/qjUc5/5/

$(document).ready(function(){
  $("p").click(function(){
    $(this).animate({fontSize:"30px"});
  });
});