Allan Allan - 7 months ago 44
CSS Question

Using jQuery's animate with css filter.

I am trying to make the level of brightness of the page animate when a button is clicked.
I need the value to make a change every time the button is clicked. Like this.

$(".brightness-minus").click(function() {
if(b < 11){
$(".settings-inner-bar").animate({width: "-=3.3vw"});

In the above code i am using the "-=" to animate the width each time.
What i am trying to do is replicate this effect on this tag.

-webkit-filter: brightness(1);
filter: brightness(1);

I am trying to bring it down in increments of 0.02 at a time.

Because of the word "brightness" being there too it doesn't seem to work.

Does anyone know how I can change the value of this in the same way.

Thanks in advance!


Inspired by this excellent answer

You can use the animate() function on a variable with a numeric value and then call a function during every step and then assign the value from the variable to a css property. So instead of using the -= operator you would need to store the current brightness in a variable and subtract from that. I made a JSFiddle to demonstrate (used an image for demonstrating the brightness):

<button class="brightness-minus">
- minus

<div class="wrapper">
<img class="settings-inner-bar" src="" />


var b = 0;
var currentBrightness = 1;
  $(".brightness-minus").click(function() {
    if(b < 11){

      $({brightness: currentBrightness}).animate({brightness: currentBrightness-0.10}, {
          duration: 500,
          easing: 'swing', // or "linear"
          step: function() {
                  "-webkit-filter": "brightness("+this.brightness+")",
                  "filter": "brightness("+this.brightness+")"
              currentBrightness = this.brightness;