0
HTML/CSS/JS를 사용하여 텍스트 티커를 만들었지 만 몇 분 후에 텍스트 변경이 애니메이션과 동기화되지 않으면 텍스트가 표시 될 때 변경되기 시작합니다. 코드가 숨겨진 경우에만 변경되도록 코드를 개선하려면 어떻게해야합니까?한쪽 텍스트 티커
var arr = ["text1", "text2", "text3", "text4"];
(function headerMessage(counter) {
var text = arr[counter];
$('.header-message > span').text(text).animate({
'margin-left': '0px'
}, 500).delay("3000").animate({
'margin-left': '-300px'
}, 500);
delete arr[counter];
arr.push(text);
setTimeout(function() {
headerMessage(counter + 1);
}, 4000);
})(0);
.header-message {
border-left: 1px solid #e3e3e3;
padding-left: 10px;
line-height: 58px;
vertical-align: middle;
float: left;
margin-left: 10px;
overflow: hidden;
}
.header-message span {
font-family: Raleway;
font-size: 14px;
color: #979797;
font-weight: 500;
height: 30px;
line-height: 30px;
margin-left: -300px;
vertical-align: middle
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-message">
<span style="margin-left: 0px;">We love to help businesses like yours.</span>
</div>
Jsfiddle 여기 https://jsfiddle.net/qhtbsh2L/
나는 그것이 유용 할 수 https://jsfiddle.net/qhtbsh2L/1/ 시도) (정지를 사용하고 있습니다 –