Есть ли хороший способ сократить этот код?

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

Вы можете использовать animate() с opacity атрибутом, проверьте пример ниже.

Надеюсь, это поможет.

---

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

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

Answer 2

Вы должны использовать 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 3

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 4

У меня есть ощущение, что вы можете сделать это с 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 5

Вы можете также использовать 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 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 (я writed этого примера с стилусом)

body 
    animation: brightness 2s linear infinite 


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