2

这是我的第一个 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>
...

谢谢大家！

4

3 回答 3

0

如果不让代码变得更复杂，你就不能真正做你想做的事。但是，您可以尝试使用通用功能来完成工作...

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) );
于 2013-04-20T15:41:44.363 回答
0

我制作了一个稍微复杂一点的版本，但是，它允许您只向文档中添加新元素，而无需更新 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/

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

于 2013-04-20T16:13:23.403 回答
0

试试这种方式：

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);
于 2013-04-20T15:36:09.560 回答