Как увеличить или уменьшить непрозрачность через несколько секунд с помощью javascript?
У меня есть этот элемент SVG в HTML:
<g id = "Group-8" transform = "translate(108.800000, 0.293172)" fill = "#FF056A" opacity = "0.1">
Здесь вы можете увидеть атрибут opacity со значением 0,1.
Теперь я хочу увеличить его значение до 0,3, 0,6, 0,9, а затем снова до 0,6, 0,3, 0,1. Он должен делать это постоянно.
Я использовал метод Javascript setTimeout, но не знаю, как заставить его делать то, что я хочу :(
setTimeout(function() {
$("#Group-8-Copy-2").attr('opacity', '0.3');
}, 1000);
@Axnyff должен ли я использовать этот setTimeout в функции?
Взгляните на stackoverflow.com/questions/22154129/…. Это почти тот же вопрос, что и ваш, но в немного другом контексте.
@ TomášPospíšek Понятно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Оформить заказ ниже фрагмент:
$( document ).ready(function() {
setInterval(function(){
opacity = $('#tilak').css("opacity");
opacity = Number(opacity) + 0.3;
if (opacity > 1) {
opacity = 0;
}
$('#tilak').css("opacity", opacity);
console.info(opacity);
}, 1000);
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id = "tilak" style = "opacity: 0">
kdjkd
</body>Почти то, что я хочу
Примите его, если он решил вашу проблему, я рад, что это помогло. :)
Ну вот
var value = [0.1, 0.3, 0.6, 0.9];
var add = true;
var i = 0;
setInterval(function() {
$("#Group-8-Copy-2").attr('opacity', [value[i]]);
i = add ? i + 1 : i -1;
add = i == value.length -1 ? false : (i == 0 ? true : add );
}, 1000);<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg">
<g id = "Group-8-Copy-2" fill = "#FF056A" opacity = "0.1">
<circle cx = "10" cy = "10" r = "5" />
</g>
</svg>Вау, отлично, а может быть плавнее?
Я бы начал i с 1, поскольку исходный SVG уже устанавливает непрозрачность на 0.1, так что вы не будете ждать ни секунды, чтобы увидеть, как он начнет анимацию.
@creativeartbd Добавление большего количества промежуточных шагов в массив value сделало бы анимацию более плавной, хотя вам придется настроить интервал, чтобы сохранить анимацию той же длины / скорости.
Вы также можете добиться пульсации без JS, используя CSS-анимации. Использование CSS-анимации часто имеет преимущества по сравнению с анимацией с помощью JS, вы можете более точно настроить синхронизацию вещей, изменив animation-duration и настроив другие вещи вместо настройки длительности тайм-аута таймера и т. д. Он также имеет тенденцию работать лучше, потому что он браузер выполняет всю работу, а не ваш код интерпретируется браузером и взаимодействует с DOM, чтобы заставить его работать.
.stepped-pulse {
animation-duration: 4s;
animation-name: stepped-pulse;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: steps(4, end);
}
@keyframes stepped-pulse {
0% {
opacity: .01;
}
100% {
opacity: .09;
}
}<svg viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg">
<g id = "Group-8-Copy-2" class = "stepped-pulse" fill = "#FF056A">
<circle cx = "10" cy = "10" r = "5" />
</g>
</svg>Если вам нужна более плавная анимация (как вы, кажется, указываете в комментариях к другому ответу), вы можете просто изменить animation-timing-function (в этом случае я удаляю его, и по умолчанию он будет ease):
.pulse {
animation-duration: 4s;
animation-name: pulse;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes pulse {
0% {
opacity: .01;
}
100% {
opacity: .09;
}
}<svg viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg">
<g id = "Group-8-Copy-2" class = "pulse" fill = "#FF056A">
<circle cx = "10" cy = "10" r = "5" />
</g>
</svg>Это отличный ответ на мои вопросы: _
setTimeoutактивирует функцию только один раз. Вам следует использоватьsetInterval, если вы хотите повторять действие каждую секунду. С некоторым глобальным состоянием вы сможете делать то, что хотите