jquery animate .css

Question

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 ?

use the jQuery animate function: http://api.jquery.com/animate/ — meo, Dec 03 '10 at 15:41

score 83 · Accepted Answer · answered Dec 03 '10 at 15:41

83

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.

answered Dec 03 '10 at 15:41

Nick Craver

623,446
136
1,297
1,155

It would be cool if SO had realtime answer monitoring to watch people type, but it would be a huge resource hog ;) – Blender Dec 03 '10 at 15:44
You could also use .filter(':not(:animated)') to check that the animation has finished running before executing again. A nice example can be found here: http://css-tricks.com/examples/jQueryStop/ – AfromanJ Aug 13 '13 at 14:24
You might also want to include a `.stop()` before the animate part, else you get a long durating flangy effect when moving your mouse accross the element fast a couple of times. Here is the fiddle with that added http://jsfiddle.net/GELTP/1586/ – Pierre Aug 19 '14 at 14:55

score 8 · Answer 2 · answered Apr 17 '12 at 13:34

8

You could opt for a pure CSS solution:

#hfont1 {
    transition: color 1s ease-in-out;
    -moz-transition: color 1s ease-in-out; /* FF 4 */
    -webkit-transition: color 1s ease-in-out; /* Safari & Chrome */
    -o-transition: color 1s ease-in-out; /* Opera */
}

answered Apr 17 '12 at 13:34

blend

640
4
6

...forgot to add the delay at the end, e.g. 'transition: color 1s ease-in-out 2s;', adding a 2 second delay to the animation. – blend May 07 '12 at 19:58

score 0 · Answer 3 · answered Mar 03 '15 at 01:53

You can actually still use ".css" and apply css transitions to the div being affected. So continue using ".css" and add the below styles to your stylesheet for "#hfont1". Since ".css" allows for a lot more properties than ".animate", this is always my preferred method.

#hfont1 {
    -webkit-transition: width 0.4s;
    transition: width 0.4s;
}

score 0 · Answer 4 · answered Dec 03 '10 at 15:42

The example from jQuery's website animates size AND font but you could easily modify it to fit your needs

$("#go").click(function(){
  $("#block").animate({ 
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em", 
    borderWidth: "10px"
  }, 1500 );

http://api.jquery.com/animate/

score -1 · Answer 5 · edited Feb 03 '17 at 16:31

If you are needing to use CSS with the jQuery .animate() function, you can use set the duration.

$("#my_image").css({
    'left':'1000px',
    6000, ''
});

We have the duration property set to 6000.

This will set the time in thousandth of seconds: 6 seconds.

After the duration our next property "easing" changes how our CSS happens.

We have our positioning set to absolute.

There are two default ones to the absolute function: 'linear' and 'swing'.

In this example I am using linear.

It allows for it to use a even pace.

The other 'swing' allows for a exponential speed increase.

There are a bunch of really cool properties to use with animate like bounce, etc.

$(document).ready(function(){
    $("#my_image").css({
        'height': '100px',
        'width':'100px',
        'background-color':'#0000EE',
        'position':'absolute'
    });// property than value

    $("#my_image").animate({
        'left':'1000px'
    },6000, 'linear', function(){
        alert("Done Animating");
    });
});

jquery animate .css

5 Answers5

Linked

Related