I have this code, which is designed to change the opacity of an image when a certain scale level is reached, in this case when the image scale is 2, the opacity should decrease again, however it just goes from 1 to 0 and doesn't do a nice transition on scroll.(我有这段代码，该代码旨在在达到一定比例级别时更改图像的不透明度，在这种情况下，当图像比例为2时，不透明度应该再次降低，但是它从1变为0，并且不会在滚动上做一个很好的过渡。)
var scroll = $(window).scrollTop();
$(".exteriorImage img").css({
transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
"-webkit-filter": "blur(" + (scroll/100) + "px)",
filter: "blur(" + (scroll/100) + "px)",
opacity: 1-(scroll/300)
});
var scaleArr = getElementPropety('interiorID', 'transform').split('(')
scaleStr = scaleArr[1].toString();
scale = scaleStr.split(',')
scaleInt = parseFloat(scale, 10);
$(".interiorImage img").css({
transform: 'translate3d(-50%, -'+ (scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
"-webkit-filter": "blur(" - (scroll/100) + "px)",
filter: "blur(" - (scroll/100) + "px)",
});
if (scaleInt < 2) {
$(".interiorImage img").css({
opacity: 0+(scroll/300)
});
} else {
document.getElementById('interiorID').style.opacity = '1';
$(".interiorImage img").css({
opacity: 1-(scroll/300)
});
}
var currentOpacity = getElementPropety('titleTwoID','opacity');
$("#titleTwoID").css({
opacity: 0+(scroll/300),
});
});
More specifically,(进一步来说，)
if (scaleInt < 2) {
$(".interiorImage img").css({
opacity: 0+(scroll/300)
});
} else {
document.getElementById('interiorID').style.opacity = '1';
$(".interiorImage img").css({
opacity: 1-(scroll/300)
});
}
(I don't also need the document.getElementById('interiorID').style.opacity = '1'; However there is no difference when I have it in or out.(（我也不需要document.getElementById('interiorID').style.opacity = '1';但是，当我将它放入或取出时，没有任何区别。)
Why does the opacity of my site cut off instead of fade on scroll?(为什么我的网站的不透明性会消失而不是滚动消失？)
ask by Angus translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
