jquery animate() not working with css properties

Question

I am trying to use jQuery .animate() to make the background of a div change if it is scrolled more than 100 pixels down a page. I am including jQuery UI, so there is no problem with that, and the code worked before when I used .css().
JS:

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('#top-links-bar').stop().animate({ 'background' : 'linear-gradient(white, gray)' }, 500);
    } else {
        $('#top-links-bar').stop().animate({ 'background' : 'none' });
    }
});

Older JS (worked):

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('#top-links-bar').stop().css('background','linear-gradient(white, gray)');
    } else {
        $('#top-links-bar').stop().css('background','none');
    }
});

Fiddle

I don't think background is an animate-able css property, but I do believe there maybe a jQuery color plugin that allows you to animate color (but I think its the background-color property you want not background and I don't think it accepts gradients... only hex values) — zgood
– zgood, Commented Jun 3, 2015 at 19:52

zgood · Accepted Answer · 2015-06-03 20:10:25Z

1

You can't animate background but you should be able to animate background-color with the jQuery Color plugin, which is bundled with jQuery UI (see here).

However, I don't think you can animate gradients.

Looking at the docs for jquery Color here it looks like it only accepts hex (#000), rgba (rgba(0, 0, 0, 0)), and some name values (black).

edited Jun 3, 2015 at 20:10

answered Jun 3, 2015 at 20:03

zgood

12.7k2 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahedi Sabuj · Accepted Answer · 2015-06-03 19:56:06Z

0

You can't animate background because it is not an animate property.

See the property list that can animates by css

http://www.w3schools.com/jquery/eff_animate.asp

answered Jun 3, 2015 at 19:56

Mahedi Sabuj

2,9543 gold badges18 silver badges30 bronze badges

Comments

A.B · Accepted Answer · 2015-06-03 20:02:10Z

0

Background , color and some other properties cannot be animated with Jquery itself

Only property Properties that can be animated:

backgroundPositionX
backgroundPositionY
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

Read more about animate and which properties can be animated here

edited Jun 3, 2015 at 20:02

answered Jun 3, 2015 at 19:54

A.B

20.5k3 gold badges43 silver badges74 bronze badges

3 Comments

zgood Over a year ago

background-color can be animated, but only with this plugin. It seems to come bundled with jQueryUI... see here

zgood Over a year ago

@A.B Well he did mention that he is using jQuery UI and this plugin comes bundled with it, so he should be able to. But yes by default the list you provided is accurate

A.B Over a year ago

@zgood my bad i didnt read about jquery UI , good observation and thanks for pointing plus1 for your answer :)

Jefferson Silva · Accepted Answer · 2015-06-03 20:03:06Z

0

Background property can't be animated.

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

Shorthand CSS properties (e.g. font, background, border) are not fully supported. For example, if you want to animate the rendered border width, at least a border style and border width other than "auto" must be set in advance. Or, if you want to animate font size, you would use fontSize or the CSS equivalent 'font-size' rather than simply 'font'.

answered Jun 3, 2015 at 20:03

Jefferson Silva

2532 silver badges9 bronze badges

Comments

lakshya_arora · Accepted Answer · 2015-06-03 20:05:39Z

0

u can't animate background in jquery use javascript ad css instead.

window.onscroll=function(){

   if(window.pageYOffset>100){
      document.getElementById('YOURID').webkitAnimation='chbg 500ms';
   } else document.getElementById('YOURID').webkitAnimation='nobg 500ms';

}

add this to css

@-webkit-keyframes chbg{
from{background:a};
to{background:b};
}
@-webkit-keyframes nobg{
from{background:a};
to{background:none};
}

answered Jun 3, 2015 at 20:05

lakshya_arora

7915 silver badges18 bronze badges

Collectives™ on Stack Overflow

jquery animate() not working with css properties

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related