Здравствуйте,
делал скрипт для изменения прозрачности в JS (учусь),
вот скрипт:
function opacify(x_opacity, y_opacity, time) {
var steps = 10,
time = (!time) ? 1000 : time,
x_opacity = (!x_opacity) ? 1 : x_opacity,
y_opacity = (!y_opacity) ? 0 : y_opacity,
anim_step = (y_opacity - x_opacity) / steps,
counter = 0,
new_opacity,
interval_id = setInterval(
function() {
x_opacity += anim_step;
new_opacity = x_opacity.toFixed(1);
console.log('x_opacity = ' + new_opacity);
document.getElementById('animation').style.opacity = new_opacity;
counter++
if (counter >= steps) { clearTimeout(interval_id)}
}, time / steps);
}
Мне пришлось изрядно помучится, прежде чем я решил проблему, добавив обработку переменной:
x_opacity += anim_step;
new_opacity = x_opacity.toFixed(1);
Только в этом случае результат уравнения цикла 1 - ((0-1)/10) стал равен:
0.9
0.8
0.7
...
0.0
Если убрать эту обработку(переменную new_opacity) и поставить напрямую:
document.getElementById('animation').style.opacity = x_opacity;
то результат (из логов консоли) цикла такой:
x_opacity = 0.9
x_opacity = 0.8
x_opacity = 0.7000000000000001
x_opacity = 0.6000000000000001
x_opacity = 0.5000000000000001
x_opacity = 0.40000000000000013
x_opacity = 0.30000000000000016
x_opacity = 0.20000000000000015
x_opacity = 0.10000000000000014
x_opacity = 1.3877787807814457e-16
Считается странно, и соответственно в конце прозрачность не убирается в ноль, а остается еле видной.
Я, повторюсь, что проблема, как таковая решена обработкой через доп. переменную, однако меня интересует совет более опытных разработчиков - почему это происходит и почему приходится ее вводить вообще. А в целом буду рад любым добротным советам.
Спасибо!
