计时器上的文本旋转木马，淡入，淡出
计时器上的文本旋转木马，淡入，淡出
提问于 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中更优雅地完成(我用它来褪色，而不是转换)，请告诉我。
回答 3
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用户
发布于 2015-09-02 02:04:04
有无数种方法可以剥去猫的皮。如果您想要执行fadeToggle，我也不会使用setInterval，因为它们将同时被调用并相互取消。
需要记住的一件事是，fadeToggle不仅会影响不透明度，而且一旦隐藏对象就会关闭显示，这可能会影响您的布局。
<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");
$(document).ready(function(){ change()});
function change() {
$("#changeText").fadeToggle(3000, 'swing', function(){
if($("#changeText").css("display") == "none")
{
elem.innerHTML = text[counter];
counter++;
if(counter >= text.length) { counter = 0; }
}
change();
});
}
</script>Stack Overflow用户
发布于 2015-09-02 04:32:47
我不知道这如何比较性能明智。此实现没有依赖项。
(function() {
var STEP = 0.1;
var x = 0;
var text = ['one', 'two', 'three'];
var element = document.querySelector('#changeText');
if(!element) { return; }
element.innerText = text[0];
requestAnimationFrame(change);
function change() {
var y = Math.sin( x );
var opacity = (y + 1) / 2;
x += STEP;
element.style.opacity = opacity;
if(y <= -0.99 && Math.sin(x) > -0.99) {
var txtIdx = text.indexOf(element.innerText);
if(txtIdx === text.length - 1) {
element.innerText = text[0];
} else {
element.innerText = text[++txtIdx];
}
}
requestAnimationFrame(change);
}
})()页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32343410
复制相关文章
相似问题
腾讯云开发者
