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動作しますが、ページに の2 つのインスタンスがあり、それぞれに 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>

すべて正常に動作します (すべてスライドインおよびスライドアウトします) が、ここに問題があります: 1 つのボックスがシーケンスを 1 回実行して停止し、別のボックスが実行されるのを待ってから、最初のボックスが再び開始します。

なぜ、どのようにこれを修正できるのか、誰もが知っているので、両方が同時に実行されますか? 助けてくれてありがとう:)

4

3 に答える 3

2

クラスAboutを作成し、2 つのインスタンスを作成できます。

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 に答える