Google Web Designer динамически регулировать прозрачность в исходном коде

Question

прямо сейчас я в настоящее время есть слайдер и два изображения на мой Google объявление

input class="gwd-input-13xh" type="range" min="0" max="50" value="25" id="slider" oninput="getInput(this.value, this.max)"> 

.img_1 { 
    position: absolute; 
    width: 180px; 
    height: 130px; 
    left: 62px; 
    top: 1px; 
    -webkit-filter: blur(5px); 
    opacity: .8; 
} 

.img_2 { 
    position: absolute; 
    width: 180px; 
    height: 130px; 
    left: 62px; 
    top: 1px; 
    -webkit-filter: blur(5px); 
    opacity: .8; 
} 

Этот слайдер, при перемещении вправо значения ползунка (выше 25) следует удалить пятно и установите непрозрачность на 1. Если перемещено влево от значения ползунка (ниже 25), то наоборот. Вот текущий код, который я должен сделать:

function getInput(value, max) { 
    var img_1 = document.getElementById("img_1"); 
    var img_2 = document.getElementById("img_2"); 
    var sliderPercentage = (value/max).toFixed(2); 
    img_1.style.opacity = 1 - sliderPercentage 
    setBlur(img_1, (10 * sliderPercentage).toFixed(2)); 
    img_2.style.opacity = sliderPercentage; 
    setBlur(img_2, 10 - (10 * sliderPercentage).toFixed(2)); 
} 

function setBlur(ele, value) { 
    if (ele.style.hasOwnProperty('filter')) { 
    ele.setAttribute("style", "-webkit-filter:blur(" + value + "px)") 
    } 
} 

Этот код работает безупречно. Однако по какой-то причине opacity не изменится. IDK, если это связано с тем, что opacity установлен в камне при работе в пределах GWD. Если вы console.log(img_1.style.opacity = 1 - sliderPercentage), вы увидите, что математика работает над кодом. Он просто не корректирует непрозрачность.

Любые предложения и идеи будут очень признательны. Следует также отметить, что, когда я НЕ запускаю функцию setBlur, функция setOpacity работает. Он просто не работает, когда я запускаю setBlur.

Answer 1

Не знаком с БДГФ либо, но я предполагаю, что проблема в том, вы переназначении всего style атрибута, поэтому позже изменение отменяет прежнее. Замена ele.setAttribute("style", "...") на

ele.style["-webkit-filter"] = "blur(" + value + "px)"; 

должен исправить вашу проблему.

Answer 2

Я не знаком с БДГФ, но я попробовал (с некоторыми незначительными изменениями):

$("#slider").change(function(){ 
    var img_1 = document.getElementById("img_1"); 
    var img_2 = document.getElementById("img_2"); 
    var sliderPercentage = ($(this).val()/$(this).attr('max')).toFixed(2); 
    img_1.style.opacity = 1 - sliderPercentage 

setBlur(img_1, (10 * sliderPercentage).toFixed(2)); 
    img_2.style.opacity = sliderPercentage; 
    setBlur(img_2, 10 - (10 * sliderPercentage).toFixed(2)); 

}); 

function setBlur(ele, value) { 
    if (ele.style.hasOwnProperty('filter')) { 
    ele.setAttribute("style", "-webkit-filter:blur(" + value + "px)") 
    } 
} 

, и я думаю, что он ведет себя так, как ожидалось.

Пожалуйста, проверьте полное решение по адресу:

https://jsfiddle.net/1eumfwoh/