CODEWITHSUNDEEP
jqueryhtmlcss
yaakov
yaakov

Reputation: 4665

jquery animate() not working with css properties

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

Upvotes: 0

Views: 207

Answers (5)

zgood
zgood

Reputation: 12581

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).

Upvotes: 1

lakshya_arora
lakshya_arora

Reputation: 791

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};
}

Upvotes: 0

Jefferson Silva
Jefferson Silva

Reputation: 255

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'.

Upvotes: 0

A.B
A.B

Reputation: 20445

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

Upvotes: 0

Mahedi Sabuj
Mahedi Sabuj

Reputation: 2944

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

Upvotes: 0

Related Questions