Question

我正在尝试创建一个简单的jquery文本旋转器：我有一个文本应该淡入淡出的范围。 stackoverflow上有类似的问题，但我不能将他们的解决方案应用到我的情况中这是我到目前为止写的内容，我想知道为什么这段代码不起作用：

var i=0;
function rotate(spanid,w1,w2,w3){
  var myspan = "#"+spanid;
  var words = [w1,w2,w3];
  $(words[i]).appendTo(myspan).fadeIn(2000).delay(2000).fadeOut(2000);
  i==words.length? i=0:i++;
  rotate(spanid,w1,w2,w3);    
  }

解决问题的方法是否正确？为什么此代码无效？提前谢谢大家！

修改代码没有工作，因为没有任何东西出现。这是相对于函数的html部分：

<p>Blah blah blah <span id="rotate"></span> blah blah blah </p>
<script>
$(rotate("rotate","word1","word2","word3"));
</script>

Answer 1

好的，我有一个快速的游戏，并为你扩展了一点..

JS小提琴：http://jsfiddle.net/4k3zfv5f/

    function rotate(sID,aWords, iIndex){
        $("#"+sID).html(aWords[iIndex]).fadeIn(1000, function() {   
            iIndex==(aWords.length-1)? iIndex=0:iIndex++;           
            $("#"+sID).fadeOut(1000, function() {                   
                rotate(sID,aWords,iIndex);                          
            }); 
        });
    }



    rotate("test1",["Hello", "World", "Foo"], 0);
    rotate("test3",["John", "Bob", "Billy", "Mike", "Larry"], 0);

编辑 - 更新

基本上我必须进行一些修正，所以不要超过每一个..只是让你比较一下变化..部分原因是渐变功能没有等到它们完成，延迟命令只适用于jquery对象和追加我为了我的视觉而逆转。

另外，您在评论中提到的最后一部分是将appendTo与html交换。

就像一个额外的奖励，一个洗牌的例子：

JS小提琴显示随机播放示例：http://jsfiddle.net/ye3rjy2v/1/

Answer 2

追加的逻辑＆gt;淡出＆gt;延迟＆gt;褪色并没有真正发挥作用。我已经为fadeout添加了一个Timeout和一个回调函数，以使其运行良好。还可以更容易地编写调用函数，因此您只有一个额外的参数。 EXAMPLE

var i = 0;

function rotate(spanid, words) {
    var arrWords = words.split(',');
    var myspan = $('#' + spanid);
    i == arrWords.length-1 ? i = 0 : i++;
    myspan.text(arrWords[i]);
    myspan.fadeIn();
    setTimeout(function(){             
        myspan.fadeOut(400, function() {            
            rotate(spanid, words); 
        });
    }, 2000);
}

rotate('rotate', 'word1,word2,word3');

Answer 3

$(function () {
    function rotate(spanid, arrayOfWords) {
        var $mySpan = $("#" + spanid);
        (function repeatRotate(index) {
            var i = index || 0;
  $mySpan.text(arrayOfWords[i]).fadeIn(1000).fadeOut(1000, function () {
                i = (i === arrayOfWords.length - 1) ? 0 : ++i;
                repeatRotate(i);
            });
        })();
    }
    rotate("rotate", ["word1", "word2", "word3"]);
});

JSBIN DEMO

以上代码将在特定时间间隔后旋转数组中定义的单词。

JQuery文本旋转器

3 个答案: