0

我有这段代码，我想做的是使文本产生“淡入淡出”效果，而每次它会做淡入淡出淡出时，它将替换文本（显示在 p id="string" 上）使用下一个数组值，但每次都显示最后一个值（名称 3 - 消息 3）。

下面的html代码：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
    var str = $("#string").text().split(' + ');
    setInterval(function(){
        s++;
        for (var s = 0; s < str.length; s++) {
            var string = str[s];
            $("#string").html(string);
            $("#string").fadeIn(500);
            $("#string").fadeOut(3000);
        }   
    }, 6000);
});
</script>
</head>
<body>
<p id="string" style="display:none;">Name 1 - Message 1 + Name 2 - Message 2 + Name 3 - Message 3</p>
</body>
</html>

谢谢。

4

2 回答 2

1

你不需要任何循环来实现你想要的：

var placeholder = $("#string");
var words = placeholder.text().split(' + ');
var index = 0;
window.setInterval(ShowCurrentWord, 6000);
ShowCurrentWord();
function ShowCurrentWord() {
    var currentWord = words[index];
    placeholder.html(currentWord).fadeIn(500).fadeOut(3000);
    index = (index + 1) % words.length;
}

现场测试用例。

详细信息：将当前索引存储在全局变量中，然后使用该索引并在每次执行函数时递增。另请注意，您需要首先调用该函数，否则您将等待 6 秒钟，然后才会出现第一个项目。

于 2013-10-14T15:01:59.180 回答
0

您的代码将在每次最后一项时显示，因为您正在计时器内进行循环。

你应该用这个替换你的代码：

$(document).ready(function(){

    var str = $("#string").text().split(' + ');
    var s = 0;
    var arrayLength = str.length;

    setInterval(function(){

        if(s>(arrayLength - 1)){
            s = 0;
        }   
        var string = str[s];
        $("#string").html(string);
        $("#string").fadeIn(500);
        $("#string").fadeOut(500);

        s++;

    }, 1000);
});

这里的小提琴：http: //jsfiddle.net/zGSYz/

于 2013-10-14T15:04:33.193 回答