Question

我编写了一个简单的函数，它使用淡入/淡出效果转换三个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。

Answer 1

这是你的意思吗？

setInterval(myFunction,8000);

javascript中的setInterval函数运行一个函数（在这种情况下）在其第二个参数中设置8秒。你会注意到你打电话给你的功能时没有括号。

您也可以调用这样的匿名函数：

setInterval(function(){alert("Hello")},3000);

如果您希望能够通过点击事件控制此操作，您可以执行以下操作：

var loop;
$(elem).click(function(){
    loop = setInterval(fades,8000);
});

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

你可以这样停止循环：clearInterval(loop);

Answer 2

http://jsfiddle.net/F4X46/1/

var i = 1,
    t;

function makeTO() {
    t = setTimeout(function() {
        console.log('test');
        if (i++ === 3) {
            i = 1;
        }
        $(".link" + i).trigger('click');
    }, 8000);
}
$(".link1").click(function() {
    i = 1;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeIn(1000);
    $(".feature2").fadeOut(1000);
    $(".feature3").fadeOut(1000);
});

$(".link2").click(function() {
    i = 2;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeOut(1000);
    $(".feature2").fadeIn(1000);
    $(".feature3").fadeOut(1000);
});

$(".link3").click(function() {
    i = 3;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeOut(1000);
    $(".feature2").fadeOut(1000);
    $(".feature3").fadeIn(1000);
});
makeTO();

Answer 3

我尝试了一些东西。请参阅 Working DEMO

HTML

<a class="link1" href="javascript:void(0)"> Link1 </a>
<a class="link2" href="javascript:void(0)" > Link2 </a>
<a class="link3" href="javascript:void(0)" > Link3 </a>
<div class="feature1">Feature1 div</div>
<div class="feature2">Feature2 div</div>
<div class="feature3">Feature3 div</div>

CSS

a { font:bold 13px verdana; padding:4px}
div { border:1px solid grey; padding:3px;width:150px;height:90px;margin:3px;}
.feature1 { background-color: #f00; }
.feature2 { background-color: #0f0; }
.feature3 { background-color: #00f; }

的jQuery

(function () {
    var i =0;
    var doFade= function() {        
        i = (i%3)+1;
        //console.log(i);
        $("div[class^=feature]").fadeOut(1000);
        $('.feature'+i+'').fadeIn(1000);                
    };
    doFade();
    window.setInterval(doFade, 2000);
})();

Answer 4

对于jQuery中的计时问题，请使用插件jquery-timing。

在jQuery中选择所有.feature *，然后：

$(".feature1,.feature2,.feature3").repeat()
    .each($).fadeIn(1000).siblings().fadeOut(1000).wait(3000).all()

尼斯。不是吗？

在jsfiddle上查看此内容。

JavaScript时序，jQuery fadeIn fadeOut

4 个答案:

HTML

CSS

的jQuery