JavaScript timing，jQuery fadeIn fadeOut
JavaScript timing，jQuery fadeIn fadeOut
提问于 2012-08-16 14:04:23
我写了一个简单的函数，使用淡入淡出效果转换三个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
Stack Overflow用户
回答已采纳
发布于 2012-08-16 14:15:15
这就是你的意思吗？
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);
Stack Overflow用户
发布于 2012-08-16 14:15:50
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();Stack Overflow用户
发布于 2012-08-16 15:10:06
我试过一些东西。请参阅
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);
})();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11981523
复制相关文章
相似问题
腾讯云开发者
