Использование анимации jQuery с фильтром css.

Question

Я пытаюсь сделать уровень яркости страницы анимированным, когда нажимается кнопка. Мне нужно значение для внесения изменений каждый раз, когда нажимается кнопка. Как это.

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

В приведенном выше коде я использую «- =» для анимации ширины каждый раз. То, что я пытаюсь сделать, это реплицировать этот эффект на этот тег.

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

Я пытаюсь свести его с шагом 0,02 за раз.

Из-за того, что слово «яркость» там тоже не работает.

Кто-нибудь знает, как я могу изменить значение этого таким же образом.

Заранее благодарен!

Answer 1

Вдохновленного this отличного ответа

Вы можете использовать функцию animate() на переменном с числовым значением, а затем вызвать функцию на каждом этапе, а затем присвоить значение из переменных к свойству CSS. Поэтому вместо использования оператора -= вам нужно будет сохранить текущую яркость в переменной и вычесть из нее. Я сделал JSFiddle, чтобы продемонстрировать (использовал изображение для демонстрации яркости): 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++; 
    } 
    }); 
});