html - jquery animate() not working with css properties -


i trying use jquery .animate() make background of div change if scrolled more 100 pixels down page. including jquery ui, there no problem that, , code worked before when 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

you can't animate background should able animate background-color jquery color plugin, bundled jquery ui (see here).

however, don't think can animate gradients.

looking @ docs jquery color here looks accepts hex (#000), rgba (rgba(0, 0, 0, 0)), , name values (black).


Comments

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

Website Login Issue developed in magento -

Can the constants be defined inside a model file of a framework in PHP? -