0

我编写了一个简单的函数，它使用淡入/淡出效果转换三个 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 秒左右自动发生一次。我还希望它们本质上“循环”，这样如果我们到达集合中的第三个 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

尝试以下操作：

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 回答
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 回答
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 回答