CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Allan
Allan

Reputation: 351

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!

Upvotes: 1

Views: 2489

Answers (1)

reinder
reinder

Reputation: 2551

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

Upvotes: 1

Related Questions