Question

有没有办法缩短这段代码？除了可能使用循环之外，我无法想到任何有用的东西。

function blackOut() {
'use strict';
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(95%)', 'filter': 'brightness(95%)'}); }, 100);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(90%)', 'filter': 'brightness(90%)'}); }, 200);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(85%)', 'filter': 'brightness(85%)'}); }, 300);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(80%)', 'filter': 'brightness(80%)'}); }, 400);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(75%)', 'filter': 'brightness(75%)'}); }, 500);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(70%)', 'filter': 'brightness(70%)'}); }, 600);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(65%)', 'filter': 'brightness(65%)'}); }, 700);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(60%)', 'filter': 'brightness(60%)'}); }, 800);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(55%)', 'filter': 'brightness(55%)'}); }, 900);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(50%)', 'filter': 'brightness(50%)'}); }, 1000);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(45%)', 'filter': 'brightness(45%)'}); }, 1100);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(40%)', 'filter': 'brightness(40%)'}); }, 1200);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(35%)', 'filter': 'brightness(35%)'}); }, 1300);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(30%)', 'filter': 'brightness(30%)'}); }, 1400);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(25%)', 'filter': 'brightness(25%)'}); }, 1500);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(20%)', 'filter': 'brightness(20%)'}); }, 1600);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(15%)', 'filter': 'brightness(15%)'}); }, 1700);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(10%)', 'filter': 'brightness(10%)'}); }, 1800);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(5%)', 'filter': 'brightness(5%)'}); }, 1900);
setTimeout(function () { $("body").css({'-webkit-filter': 'brightness(0%)', 'filter': 'brightness(0%)'}); }, 2000);
}

Answer 1

你应该使用由类更改触发的CSS动画。

CSS：

body {
  -webkit-filter : brightness(100%);
  filter : brightness(100%);
}
body.shadowed {
  -webkit-filter : brightness(0%);
  filter : brightness(0%);
  -webkit-transition: 2s;
  transition: 2s;
}

jquery：

$("body").addClass("shadowed");

Answer 2

您也可以使用transition：

body {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
    transition: -webkit-filter 2s, filter 2s;
}

body.blackout {
    -webkit-filter: brightness(0%);
    filter: brightness(0%);
}

Answer 3

您可以将{strong> animate() 与opacity属性一起使用，请查看以下示例。

希望这有帮助。

＆＃13;

$("h1").animate({
  opacity: 0
}, 2000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>Some text</h1>
</div>

＆＃13;

Answer 4

var bright = 95;
var time=100;
for(var i = 0; i<10;i++){

    setTimeout(function () { $("body").css({'-webkit-filter': 'brightness('+bright+'%)', 'filter': 'brightness('+bright+'%)'}); }, time);

    time+=100;
    bright-=5;

}

Answer 5

我觉得你可以用CSS动画做到这一点。但要按照超时的方式进行操作，请使用带计数器的间隔，并在达到零时将其移除。

function blackOut() {
  var step = 100,
    interval = window.setInterval(change, 100);

  function change() {
    step -= 5;
    $("body").css({
      '-webkit-filter': 'brightness(' + step + '%)',
      'filter': 'brightness(' + step + '%)'
    });
    if (step === 0) window.clearInterval(interval);
  }
}

$("button").on("click", blackOut);

body * {
  background-color: #CCC
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Test</h2>
<div>Test</div>
<button>Click Me</button>

Answer 6

具有setInterval功能的解决方案：

(function() {
    var runs = 20,
        degree = 95;
    var i = setInterval(function() {
        $("body").css({'-webkit-filter': 'brightness(' + degree + '%)', 'filter': 'brightness(' + degree + '%)'});
        degree -= 5;                        
        --runs;
        if (runs == 0) {
             clearInterval(i);
        }    
    }, 100);
}());

Answer 7

你应该使用带有css的关键帧，（我用手写笔写这个例子）

body 
    animation: brightness 2s linear infinite


@keyframes brightness 
    0% 
         filter: brightness 0%
    50%
         filter: brightness 50%
    100%
         filter: brightness 100%

有没有什么好方法可以缩短这段代码？

7 个答案: