JavaScript timing, jQuery fadeIn fadeOut

JavaScript timing, jQuery fadeIn fadeOut

本文关键字：fadeIn fadeOut jQuery timing JavaScript      更新时间：2023-09-26

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

这是你的意思吗？

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);

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();

我尝试了一些东西。 请参阅工作演示

.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);
})();​

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

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

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

好。不是吗？

看到这个在jsfiddle上运行。

相关文章：