jquery 질문드립니다.
본문
안녕하세요.
아래와 같이 문장 밑으로 똑같은 <g로 시작하는 문장이 200개 정도가 쭉 이어집니다.
<g id="run" clip-path="url(#__lottie_element_272)">
그럼 순서대로 0.5초 간격으로 block -> none이 계속이어집니다.
아래와 같은 로직이 되는지 알고 싶습니다.
감사합니다.
첫번째 0.5초
1. <g style="display: block;">
2. <g style="display: none;">
3. <g style="display: none;">
두번째 0.5초
1. <g style="display: none;">
2. <g style="display: block;">
3. <g style="display: none;">
세번째 0.5초
1. <g style="display: none;">
2. <g style="display: none;">
3. <g style="display: block;">
<g id="run" clip-path="url(#__lottie_element_272)">
<g style="display: block;" transform="matrix(1.5,51.375)" opacity="1">
<g opacity="1" transform="matrix(0.91706001750289916992)">
<path fill-opacity="1"></path>
</g>
</g>
<g style="display: none;" transform="matrix(1.5,51.375)" opacity="1">
<g opacity="1" transform="matrix(0.91706001750289916992)">
<path fill-opacity="1"></path>
</g>
</g>
<g style="display: none;" transform="matrix(1.5,51.375)" opacity="1">
<g opacity="1" transform="matrix(0.91706001750289916992)">
<path fill-opacity="1"></path>
</g>
</g>
답변 1
시도해보세요.
<script>
const gElements = document.querySelectorAll('g[id="run"]');
let currentIndex = 0;
setInterval(() => {
gElements[currentIndex].style.display = 'none';
currentIndex = (currentIndex + 1) % gElements.length;
gElements[currentIndex].style.display = 'block';
}, 500);
</script>
안녕하세요.
응용해서 잘 처리 되었습니다.
감사합니다.