0

这个问题已经被问过很多次了，但是作为一个初学者，我很难将其他人的脚本应用到我自己分配的类和变量中。

我想知道的是：

我在 html 中有一个简单的区域，如下所示：

<h1>I like: <span class ="hobbies">array items go here</span></h1>

我已经制作了一个这样的数组：

var hobbies=new Array("graphic design.","photography.", "videography.", "marketing.", "craft beers.")

我希望每个项目单独出现 3 秒左右，然后淡出并被数组中的下一个项目替换。我还希望它在完成所有选项后循环。我怎么能做这样的事情？

我也有：

$('.hobbies').html(hobbies);

提前感谢您的通读！

4

2 回答 2

3

基本上，您将不得不使用 asetInterval在特定时间延迟时重复该功能。

在 hobbies 数组中保存当前位置的索引，并在每次迭代时增加索引。确保在索引达到与数组长度相同的值时重置索引。

// Always a good idea to cache selectors you're gonna be using alot.
var hobbyContainer = $('.hobby');
hobbyContainer.text(hobbies[0]);
var index = 1;
setInterval(function(){
  hobbyContainer.fadeOut('fast',function(){
    hobbyContainer.text(hobbies[index]);
    index++;
    if (index >= hobbies.length){
      index = 0;
    }
  }).fadeIn('fast');
},3000);

您可能必须使用间隔的持续时间才能为淡入淡出的动画留出时间。或者你可以让淡入淡出动画更快，就像我在我的例子中所做的那样。

这是一个关于 jsFiddle 的简单演示

于 2013-04-30T16:28:46.183 回答
0

尝试这样的事情 -

    var hobbies = //"yourarray";
    var count = 0;
    setInterval(function() {
        scrollText(hobbies[count]);
        count++;
        if (count == hobbies.length ) {
            count = 0;
        }
    }, 3000);


function scrollText(text) {     
    $(".hobbies").animate({opacity:0},function(){
        $(this).html(text).animate({opacity:1});  
    });
}

工作演示

于 2013-04-30T16:32:20.670 回答