Javascript 使用jQuery'；使用css过滤器设置动画。

我试图使页面的亮度水平动画时，按钮被点击。 每次单击按钮时，我都需要该值进行更改。像这样

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

我试图一次以0.02的增量降低它

因为“亮度”这个词也在那里，所以它似乎不起作用

有人知道我如何以同样的方式改变这个值吗

提前谢谢

受优秀答案的启发

您可以对具有数值的变量使用

animate（）

函数，然后在每个步骤中调用函数，然后将变量中的值指定给css属性。因此，您需要将当前亮度存储在变量中并从中减去，而不是使用

-=

运算符。我制作了一个JSFIDLE来演示（使用图像演示亮度）：

-减去

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

var b=0；
无功电流亮度=1；
$（函数（）{
$（“.brightness减号”）。单击（函数（）{
如果（b<11）{
$（{brightness:currentBrightness}）。设置动画（{brightness:currentBrightness-0.10}{
持续时间：500，
缓和：“摆动”、“摆动”或“线性”
步骤：函数（）{
console.log（this.brightness）；
$（“.settings内部栏”）.css({
“-webkit筛选器”：“亮度（“+this.brightness+”），
“过滤器”：“亮度（“+this.brightness+”）
});
currentBrightness=this.brightness；
}
});
b++；
}
});
});

如果b<11听起来像是要递增。也许你的意思是如果b>11？您好，谢谢您的回复！该部分仅用于使内杆不会从容器中取出。因此，如果栏是空的，那么按钮将无法工作。这将阻止用户将亮度降低到低于我计划设置的最小值。请尝试在此处运行代码：谢谢！感谢我们的最佳方式是投票表决您认为有用的问题和答案。：）哇，太不可思议了！非常感谢你！仅供参考，我发现的另一个修复方法是在容器后面放置一个黑色div，并减少不透明度，而不是过滤器。以防有人在寻找其他解决方案时遇到此问题。：）

<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>

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