Question

192

jquery animate .css

rated 0 times [ 194] [ 2] / answers: 1 / hits: 134391 / 14 Years ago, fri, december 3, 2010, 12:00:00

I have a script:

$('#hfont1').hover(

    function() {

        $(this).css({color:#efbe5c,font-size:52pt}); //mouseover

    }, 

    function() {

        $(this).css({color:#e8a010,font-size:48pt}); // mouseout

    }

);

how can i animate it or slow it down, so it wont be instant ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominickmackenziet

Add To Favorites

Follow

Total Points: 583

Total Questions: 101

Total Answers: 117

Location: Saint Lucia

Member since Wed, Feb 8, 2023

1 Year ago

dominickmackenziet questions

1 How to keep user logged after browser closing in React - Express?

Fri, May 20, 22, 00:00, 2 Years ago

1 Why do I get an Unhandled Promise Rejection with await Promise.all

Tue, Jun 1, 21, 00:00, 3 Years ago

1 Convert Maybe< string>[]' to 'string[]

Wed, Apr 7, 21, 00:00, 3 Years ago

1 (0 , _reactRouterDom.useHistory) is not a function

Fri, Feb 12, 21, 00:00, 3 Years ago

1 How to execute API call after entering 3 characters in field?

Fri, Aug 7, 20, 00:00, 4 Years ago

View All

answered 14 Years ago juancarlos · Accepted Answer

Just use .animate() instead of .css() (with a duration if you want), like this:

$('#hfont1').hover(function() {

    $(this).animate({color:#efbe5c,font-size:52pt}, 1000);

}, function() {

    $(this).animate({color:#e8a010,font-size:48pt}, 1000);

});

You can test it here. Note though, you need either the jQuery color plugin, or jQuery UI included to animate the color. In the above, the duration is 1000ms, you can change it, or just leave it off for the default 400ms duration.