0

フェードイン/フェードアウト効果を使用して3つのdiv要素を遷移させる単純な関数を作成しました。このイベントは、ユーザーがリンクをクリックしたときにトリガーされます。これが私のコードです：

$(".link1").click(function () {
   $(".feature1").fadeIn(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeOut(1000);
});

$(".link2").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeIn(1000);
   $(".feature3").fadeOut(1000);
});

$(".link3").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeIn(1000);
});

これらの遷移が約8秒ごとに自動的に発生するように、ある種のタイマーを設定できる必要があります。また、基本的に「ループ」させて、セットの3番目のdivに到達すると、最初のdivに戻るようにします。

4

4 に答える 4

1

setInterval(式、タイムアウト); 関数を間隔を置いて実行し、その間のタイムアウトの長さ

例：

var intervalID = setInterval(alert('heelo'), 3000); // will alert hello every 3 seconds

// clearInterval(intervalID); // タイマーをクリアします

于 2012-07-26T20:45:05.103 に答える
1

setTimeout() 関数を使用してみてください。

var timer = null;

function foo_loop(div, timeout) {
  if (div > 3) div = 1;
  $(".feature"+div).fadeIn(1000);
  $("div[class^=feature]:not(.feature"+div+")").fadeOut(1000);
  clearTimeout(timer);
  timer = setTimeout(function() {
    foo_loop(div + 1, timeout);
  }, timeout);
}

このように実行します (最初の div と 8 秒のタイムアウトで開始するには):

foo_loop(1, 8000);

ループを停止する機能:

function stop_loop() {
  clearTimeout(timer);
}

ループを停止する必要があるときに実行します (たとえば、id="stop" の要素をクリックする):

$('#stop').bind('click', stop_loop);
于 2012-07-26T20:49:22.777 に答える
1

次のことを試してください。

var i = 0;
var transition = setInterval(function(){
                     i++;
                     if (i == 4) {i = 1}
                     $(".feature"+i).stop().fadeIn(1000, function(){
                        $(this).delay('6000').fadeOut(1000)
                     })
                  }, 8000)
于 2012-07-26T20:45:56.977 に答える
0

いつループさせたいのか、どのくらいの頻度でループさせたいのか完全には理解できませんが、これは少し役立つと思います... 8秒ごとにアニメーションをループします...

function fadeLoop(selectors, animations, times, index) {
    index = index || 0;
    if(index == selectors.length) return;
    $((selectors[index])[animations[index]](times[index], function() {
        fadeLoop(selectors, animations, times, index + 1);
    });
}

setInterval(function() {
    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeIn', 'fadeOut', 'fadeOut'],
        [1000, 1000, 1000]
    );

    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeOut', 'fadeIn', 'fadeOut'],
        [1000, 1000, 1000]
    );

    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeOut', 'fadeOut', 'fadeIn'],
        [1000, 1000, 1000]
    );
}, 1000 * 8);
于 2012-07-26T20:46:23.217 に答える