计时器上的文本旋转木马，淡入，淡出
计时器上的文本旋转木马，淡入，淡出
提问于 2015-09-02 01:43:34
我试图让一些文字淡出，改变，并在一定的时间间隔内自动淡出(即，没有按钮)。
我无法让这段代码与衰落同步setInterval。我已经尝试过fadeToggle，以及fadeIn和fadeOut的组合。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="changeText">Zero</div>
<script type="text/javascript">
var text = ["One", "Two", "Three"];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 3000);
function change() {
$("#changeText").fadeToggle(3000);
elem.innerHTML = text[counter];
counter++;
if(counter >= text.length) { counter = 0; }
}
</script>我对这个解决方案一无所知。如果这可以在CSS中更优雅地完成(我用它来褪色，而不是转换)，请告诉我。
Stack Overflow用户
回答已采纳
发布于 2015-09-02 02:19:14
尝试使用.fadeTo()，余数算子
var text = ["One", "Two", "Three"];
var counter = 0;
var elem = document.getElementById("changeText");
function change() {
$(elem).fadeTo(3000, 0, function() {
this.innerHTML = text[counter];
counter = ++counter % text.length;
$(this).fadeTo(3000, 1, change)
})
}
change()<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="changeText">Zero</div>
<script type="text/javascript">
</script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32343410
复制相关文章
相似问题
腾讯云开发者
