0

我写了一些jQuery来滑入一些文本，然后在延迟之后再次滑出并滑入下一个。这是脚本：

var About = {
    init: function () {
        var text_spans = $('.headline-box a'),
            extracts = new Array(),
            delay = 5,
            current = 0;

        text_spans.each(function (index) {
            if ($(this).is(":visible")) {
                current = index;
            }
            extracts.push($(this));
        });

        var interval = setInterval(function () {

            target = (current < (extracts.length - 1)) ? current + 1 : 0;

            extracts[current].slideUp('slow');
            extracts[target].slideDown('slow');

            current = target;

        }, delay * 500);

    }
}

About.init();

它可以工作，但我.headline-box在页面上有两个实例，每个实例都有 3 个链接（a）。像这样（简化）：

<div class="headline-box">
    <a href="#">Lorem Ipsum</a>
    <a href="#">Dolar Sit Amet</a>
    <a href="#">Aliquam imperdiet ornare</a>
</div>

<div class="headline-box">
    <a href="#">Lorem Ipsum</a>
    <a href="#">Dolar Sit Amet</a>
    <a href="#">Aliquam imperdiet ornare</a>
</div>

一切正常（它们都滑入和滑出），但问题是：一个盒子会运行一次，然后停止，等待另一个盒子运行，然后第一个盒子会重新开始。

有谁知道为什么以及如何解决这个问题，所以它们同时运行？感谢您的任何帮助 ：）

4

3 回答 3

2

您可以创建一个类About，并创建两个实例：

function Abount() {
   //define class here
}

$(function() {
    $('.headline-box').each(function(n, elem) {
        new About(elem);
    });
})

完整版：http: //jsfiddle.net/vAbZ6/

于 2013-02-06T12:10:30.593 回答
0

我相信您可以在每个 div.headline-box 上使用每个 jquery。

这应该做到（或非常接近）。

$('div.headline-box').each(function(){
  var text_spans = $(this).children('a') ;
   extracts = new Array(),
        delay = 5,
        current = 0;

    text_spans.each(function (index) {
        if ($(this).is(":visible")) {
            current = index;
        }
        extracts.push($(this));
    });

    var interval = setInterval(function () {

        target = (current < (extracts.length - 1)) ? current + 1 : 0;

        extracts[current].slideUp('slow');
        extracts[target].slideDown('slow');

        current = target;

    }, delay * 500);

});

于 2013-02-06T10:33:52.460 回答
0

您的代码正在从每个标题框中获取所有锚元素并按顺序循环浏览这些元素。从您更新的答案中，我收集到您希望标题框独立地循环通过它们的子元素。

我已经用一个例子设置了这个jsfiddle 。

诀窍是确保您单独跟踪您正在循环的标题框。最简单的方法是为每个标题框创建一个控制器对象的实例。

在示例代码中，您可以调用

var about_a = new About($("#box_a"));
var about_b = new About($("#box_b"));
于 2013-02-06T11:41:07.923 回答