淡入淡出&输出间隔
Fade In & Out Interval
如何在不点击的情况下实现类似滑块的效果?这是一个来自JSFIDDLE的示例。
从示例中,我们必须单击图像才能查看下一个内容。但我想要的是,让它淡出并等待5秒,然后淡出到下一个内容。
我必须更改此处的javascript吗?:
$('#two, #three').hide();
$('.slide').click(function(){
$(this).fadeOut().next().fadeIn();
});
我是新手。请引导我。非常感谢!
您可以使用链式事件在另一个事件结束后触发一个事件,并使用delay()
函数使事件"等待"发生:
$('#two, #three').hide();
$(document).ready(function() {
$("#one").delay(10000).fadeOut("slow", function(){ // first animation delayed 10 secs
$(this).next().fadeIn("slow", function(){
$(this).delay(2500).fadeOut("slow", function(){
$(this).next().fadeIn("slow");
});
});
});
});
#pic {
width:460px;
height:300px;
margin:0 20px 0 20px;
overflow:hidden;
}
.slide {
width:460px;
height:300px;
}
#one {
background:url('http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png') no-repeat;
}
#two {
background:url('http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/Yahoo-Messenger-icon.png') no-repeat;
}
#three {
background:url('http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/3D-Studio-Max-icon.png') no-repeat;
}
#one {
position: absolute;
margin-top:50px;
}
#one .tooltip-content {
display: none;
position: absolute;
bottom:100%;
left:0;
right: 5%;
background-color:aquamarine;
padding:;
}
#one:hover .tooltip-content {
display: block;
}
#one .tooltip-content2 {
display: none;
position: absolute;
top:100%;
left:0;
right: 5%;
background-color:bisque;
padding:;
}
#one:hover .tooltip-content2 {
display: block;
}
#two {
position: absolute;
margin-top:50px;
}
#two .tooltip-content {
display: none;
position: absolute;
bottom:100%;
left:0;
right: 5%;
background-color:goldenrod;
padding:;
}
#two:hover .tooltip-content {
display: block;
}
#two .tooltip-content2 {
display: none;
position: absolute;
top:100%;
left:0;
right: 5%;
background-color:coral;
padding:;
}
#two:hover .tooltip-content2 {
display: block;
}
#three {
position: absolute;
margin-top:50px;
}
#three .tooltip-content {
display: none;
position: absolute;
bottom:100%;
left:0;
right: 5%;
background-color:darksalmon;
padding:;
}
#three:hover .tooltip-content {
display: block;
}
#three .tooltip-content2 {
display: none;
position: absolute;
top:100%;
left:0;
right: 5%;
background-color:darkseagreen;
padding:;
}
#three:hover .tooltip-content2 {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic">
<div id="one" class="slide">
<div class="tooltip-content">
<p>Here is some content for the tooltip</p>
</div>
<div class="tooltip-content2">
<p>Lorem ipsum</p>
</div>
</div>
<div id="two" class="slide">
<div class="tooltip-content">
<p>Here is some content for the tooltip</p>
</div>
<div class="tooltip-content2">
<p>Lorem ipsum</p>
</div>
</div>
<div id="three" class="slide">
<div class="tooltip-content">
<p>Here is some content for the tooltip</p>
</div>
<div class="tooltip-content2">
<p>Lorem ipsum</p>
</div>
</div>
</div>
编辑
您可以将delay()
函数的参数调整为任意毫秒数。
EDIT2
要使函数在页面加载后立即运行,可以使用JQuery的$(document).ready()
。
FIDDLE
试试这个代码。我希望这能有所帮助。。。。
setInterval(function() {
$("#fade").fadeToggle();
}, 1500);
<div id="fade" style="background-color:#66FFFF;width:500px;
height:100px;text-align:center;">
This text should fade in and out
</div>
这是jsfiddle的工作链接。检查一下:-http://jsfiddle.net/emgee/4QJeG/7/
您需要使用JS setInterval方法每5秒调用一次更改:
setInterval(function(){
$('.slide').fadeOut().next().fadeIn();
}, 5000);
更新的JSFIDDLE:http://jsfiddle.net/ghorg12110/e40ct6sn/2/
将javascript代码放在5秒的setinterval函数中,如下所示下面是一个jsfiddle工作示例http://jsfiddle.net/elviz/e40ct6sn/8/
$('#two, #three').hide();
setInterval(function(){ $('.slide').fadeOut().next().fadeIn();
$('.tooltip-content, .tooltip-content2').show();
}, 5000);
相关文章:
- jquery点击函数select&取消选择
- 在JavaScript中输出转义字符
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- Angular js-返回一个包含类似
- 一点javascript元编程&可链接的设置器
- 如何在jQuery中将函数的输出分配给变量
- 通过JSON&比较时间
- Jquery模板,如果xx&&如果yy
- Javascript,输出结果后页面不断刷新
- jQuery工具验证器自定义效果-添加&消除影响
- Twitter引导程序Typeahead-Id&标签
- AngularJS&JSON-从Previous&下一个对象
- 什么是&&在没有if的行中的变量之间
- 关于引入外部javascript文件的问题&css通过https
- 指令的模板必须只有一个根元素:With restrict E&替换true
- 使用ajax的服务器端分页&jQuery
- Datetime格式为Friendly Time.Moment JS输出错误
- Javascript,如果条件在没有&&逻辑运算符当&&它不起作用
- 如何将angularjs中的javascript字符串输出为循环数组
- 淡入淡出&输出间隔