Question

这是我的第一个stackoverflow问题，我希望我没有错过任何相关主题，但我还没有找到答案。我一直忙着处理一个（可能是简单的）jquery任务而且我被困住了。而且，嗯，当然我是jquery的新手，所以请善待： - ）

我想做一个简单闪烁的单词混淆的事情，其中不同的单词组（列表项）淡入和淡出个别延迟。我使用了一个简单的函数，我为三组中的每一组调用了三次。我想知道是否有办法将这三个函数结合起来，但仍然为每个单词数组定义一个单独的延迟。

这是我的小提琴：http://jsfiddle.net/alani/eHthD/

也许没有办法把所有东西放在一个函数中，并且完全可以使用长版本？我不知道。这对我来说似乎完全没效率......

快速浏览这里是我的一个功能：

var wordIndex = -1;

(function () {

    var words1 = $(".cloud1");
    function showNextWord() {

        ++wordIndex;
        words1.eq(wordIndex % words1.length)
            .fadeIn(500)
            .delay(1000)
            .fadeOut(1000, showNextWord);
    }

    showNextWord();

})();

这是我列表中的一部分

<ul>
<li class="cloud1">smoke</li>
<li class="cloud1">denim</li>
<li class="cloud1">eyebrow</li>

<li class="cloud2">angle</li>
<li class="cloud2">staple</li>
<li class="cloud2">basket</li>
...

谢谢大家！

Answer 1

以这种方式尝试：

var flash = function (jq, fadein, wait, fadeout) {

    var quotes = $(jq);
    var quoteIndex = -1;

    function showNextQuote() {

        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(fadein)
            .delay(wait)
            .fadeOut(fadeout, showNextQuote);
    }

    showNextQuote();

};

flash(".cloud1", 500, 700, 500);
flash(".cloud2", 500, 800, 500);
flash(".cloud3", 500, 900, 500);

Answer 2

你不能真正做到你想做的事情，使代码更复杂。然而，你可以尝试的是具有完成工作的共同功能......

function beginCloud($obj, delay) {

    var wordIndex = -1;
    var showNextWord = function() {

        ++wordIndex;
        $obj.eq(wordIndex % $obj.length)
            .fadeIn(500)
            .delay(delay)
            .fadeOut(1000, showNextWord);
    }

    showNextWord();

}

beginCloud( $('.cloud1', 1000) );
beginCloud( $('.cloud2', 2000) );
beginCloud( $('.cloud3', 3000) );

Answer 3

我制作了一个稍微复杂的版本，但是，它允许您只需在文档中添加新元素，而无需更新JavaScript。

以下是代码：

var wordIndexes = {};

$(function() {
    num_groups = 0;
    $('ul.cloud').each(function() {
        var group = $(this).data('group');
        wordIndexes[group] = -1;
        num_groups = (group > num_groups) ? group : num_groups;
    });

    for (n=1; n <= num_groups; ++n) {
        (function(i) {
          var words = $('ul.cloud[data-group="' + i + '"] li');

          function showNextWord() {
            ++wordIndexes[i];
            words.eq(wordIndexes[i] % words.length)
                .fadeIn(500)
                .delay(i * 1000)
                .fadeOut(1000, showNextWord);
          }
          showNextWord();
        })(n);
    }
});

CSS：

.cloud li {
    display: none;
}
.cloud[data-group="2"] li {
    margin-left: 200px;
}
.cloud[data-group="3"] li{
    margin-left: 100px;
}

HTML应该是这样的：

<ul class="cloud" data-group="1">
  <li>smoke</li>
  <li>denim</li>
  ...
</ul>

<ul class="cloud" data-group="2">
...

http://jsfiddle.net/V5EFn/

您可以选择为延迟或您认为合适的任何其他配置参数添加数据字段。

如何在一个函数中为多个数组定义不同的选项？

3 个答案: