Change Background Gradient with JQuery

JavaScript
1

Hi guys, basically I have a background with a vertical gradient light to dark on a div.

Now when that div expands I lose the gradiated effect because the css has it set up to start in a certain place and blend to dark at a set percentage of the div. I would like to use JQuery so that when the div expands, I can change the gradient positioning. Can anyone paste some code?

Also on older versions of IE (7 and 8) I am using filters to do the gradient, does anyone know if JQuery can dynamically change these filters too?

thanks in advance :wink:

2

Does the div expand to pre-defined values? If so the simplest way to tackle this is to create several classes with the variant gradients you are using and apply those instead of changing the css properties. You could even animated them using CSS transitions, but you won’t get support for that in older browsers and very limited support in versions of IE. If you have a more fluid expansion then this probably won’t work and someone might have an answer for setting those properties.

3

Thanks Anthony, I should have realized that is the best solution cheers

4

If you really need it, don’t forget about SVG. It’ll allow you to animate the gradient across all modern browsers (IE9+). This page can get you started http://apike.ca/prog_svg_gradients.html … although you might be better off with what Anthony suggested.

5

Hey thanks OMGCarlos,

I will look into it, have been hearing about SVG for years, shall check it out :wink: