Возможны два варианта blur.js?

Question

Я хотел бы использовать blur.js на двух разных элементах с разными источниками. Как я могу это достичь?

Мой код до сих пор:

$('.blurry1').blurjs({ 
     source: '.source1', 
     cache: false, 
     radius: 10, 
     debug: 1, 
}); 

$('.blurry2').blurjs({ 
     source: '.source2', 
     cache: false, 
     radius: 10, 
     debug: 1, 
}); 

Только вторая функция выполняется правильно.

Answer 1

Это можно сделать, но это немного взломать, поскольку он полагается на функцию setTimeout, чтобы дождаться завершения первой функции blurjs.

$('#blurry1').blurjs({ 
    source: 'body', 
    radius: 30, 
    overlay: 'rgba(0, 0, 0, .2)', 
    cache: false 
}); 

setTimeout(function() { 
    $('#blurry2').blurjs({ 
     source: '#bg2', 
     radius: 30, 
     overlay: 'rgba(0, 0, 0, .2)', 
     cache: false 
    }); 
}, 1000); 

Answer 2

This fork из Blur.js путем CezaryDanielNowak фиксирует ограничение, налагаемое на начальном этапе осуществления и позволяет многоэлементных не размывание одновременно - нет необходимости в SetTimeout.