Allan Allan - 1 month ago 8
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"});
b++;
console.log(b);
}


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!

Answer

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): https://jsfiddle.net/0ccgjgL8/1/

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

<div class="wrapper">
<img class="settings-inner-bar" src="http://lorempixel.com/output/technics-q-c-640-480-4.jpg" />
</div>

jQuery

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

      $({brightness: currentBrightness}).animate({brightness: currentBrightness-0.10}, {
          duration: 500,
          easing: 'swing', // or "linear"
          step: function() {
              console.log(this.brightness);
              $(".settings-inner-bar").css({
                  "-webkit-filter": "brightness("+this.brightness+")",
                  "filter": "brightness("+this.brightness+")"
              });
              currentBrightness = this.brightness;
          }
      });
      b++;
    }
  });
});
Comments