淡入淡出&Out Interval Javascript
Fade In & Out Interval Javascript
如何在不悬停/单击的情况下让这个fiddle从第一个内容(mario)更改为下一个内容(smiley face)?我希望它在5秒钟后自动更改。也从第二内容到第三内容和第四内容。
这是一个来自JSFIDDLE的示例。我想也许编码应该在这里的某个地方更改:
$('#text1').hover(function () {
hey();
});
除此之外,有人知道为什么我的第四个内容没有显示吗?
我是新手。请引导我。非常感谢。
使用setTimeout()
函数
setTimeout(function () {
hey();
},5000);
Fiddle更新的Fiddle
编辑
根据您的需求,在35秒后完成
$('#text1,#text2, #text3, #text4').hide();
setTimeout(function () {
$('#text1').show();
hey();
},35000);
function hey() {
setTimeout(function () {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
},5000);
}
更新的小提琴。根据评论更新新的FIDDLE
只需添加setTimeout(hey, 5000);
而不是悬停处理程序:
$('#text2, #text3, #text4').hide();
setTimeout(hey, 5000);
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
}
您的hey()最多显示第三个文本。添加另一个next()转换。
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow",function(){
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
});
});
}
如果您想在5秒钟后自动更改内容,您应该使用setTimeout函数,例如:
setTimeout(function(){ alert("Hello"); }, 5000)
这将在5秒后触发警报框。。。
我认为你必须使用setInterval()
setInterval(function(){ hey(); }, 3000);
请参阅此链接setTimeout和setInterval
相关文章:
- delete在Object上效率低下,但在DOM Element's的数据属性,与null out相比
- Mouse Out Orange Div "CurrentHeight" is not applyi
- Angular js$Interval怪异行为-Firefox Chrome
- 如何在aws S3 javascript SDK中配置interval和max_attempts
- $interval不允许我更新前端
- 正在尝试停止函数上的Interval
- 如何清除此代码中的Interval()
- 如何在量角器测试中设置$interval而不是超时
- getElementsByTagName('img').length logs out to 0
- Javascript/jQuery:当用户Active 值更改时切换 (vjs-fade-out) (video.js)
- javascript/angularjs - fade out
- 在pink-in上运行js;在pink-out上运行不同的js
- mouseover,out and click事件不适用于折线
- 使用一个菜单按钮添加animate-in和animate-out类
- 如何在react组件构造函数中设置Interval
- JQuery-防止表单在输入按钮上提交,out防止按键敲击
- jquery fadeIn/Out,自定义幻灯片放映故障,淡入淡出内存?淡入淡出队列
- 无法比较out.print()返回的字符串
- Jquery焦点(in|out)以奇怪的顺序运行
- 淡入淡出&Out Interval Javascript