jQuery淡入淡出-函数不重复
jQuery淡入淡出-函数不重复
提问于 2013-05-08 00:31:06
我是一个jQuery-noob尝试学习它，我有一个问题。我不想我的div在彼此之间消失，就像1-2-1-2-1- 2...我想让它重复一次，但它只做了一次，然后就停止了。
代码：
<script>
function fadeInOut () {
$('#text-2').delay(3000).fadeOut(750, function() {
$('#text-5').fadeIn(750, function() {
$('#text-5').delay(3000).fadeOut(750, function() {
$('#text-2').fadeIn(750);
});
});
});
}
$(document).ready(function(){
fadeInOut();
});
</script>
<style>
#ESCM{
width:400px;
float:right;
background-image: linear-gradient(left bottom, rgb(251,86,91) 0%, rgb(14,34,40) 68%, rgb(0,66,64) 77%);
background-image: -o-linear-gradient(left bottom, rgb(251,86,91) 0%, rgb(14,34,40) 68%, rgb(0,66,64) 77%);
background-image: -moz-linear-gradient(left bottom, rgb(251,86,91) 0%, rgb(14,34,40) 68%, rgb(0,66,64) 77%);
background-image: -webkit-linear-gradient(left bottom, rgb(251,86,91) 0%, rgb(14,34,40) 68%, rgb(0,66,64) 77%);
background-image: -ms-linear-gradient(left bottom, rgb(251,86,91) 0%, rgb(14,34,40) 68%, rgb(0,66,64) 77%);
background-image: -webkit-gradient(
linear,
left bottom,
right top,
color-stop(0, rgb(251,86,91)),
color-stop(0.68, rgb(14,34,40)),
color-stop(0.77, rgb(0,66,64))
);
padding:20px;
box-shadow:0 1px 8px rgba(0,0,0,0.7);
border-radius:5px;
moz-border-radius:5px;
o-border-radius:5px;
height:621px;
}
#text-5{
display:none;
}
html{
color:white;
font-family:sans-serif;
}
h2{
font-size:26px;
}
}
</style>
<html>
<div id="ESCM">
<h2>De tävlande</h2>
<div id="text-2">
Test1
</div>
<div id="text-5">
Test2
</div>
</div>
</html>
JS-Fiddle
IN ACTION
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-05-08 00:35:09
一旦完成，您需要再次调用fadeInOut函数。将函数更改为：
function fadeInOut() {
$('#text-2').delay(3000).fadeOut(750, function () {
$('#text-5').fadeIn(750, function () {
$('#text-5').delay(3000).fadeOut(750, function () {
$('#text-2').fadeIn(750, fadeInOut);
});
});
});
}
fadeInOut();Stack Overflow用户
发布于 2013-05-08 00:42:17
简短而简单：
使用array.shift()从数组中获取第一项，删除它并将其推送到末尾。然后在回调中使用fadeInOut。
Demo
var ids=["text-2","text-5"];
function fadeInOut () {
var id = ids.shift(); //This will ensure cycle to happen.
//no matter how many divs you add. you just need to add it in the array ids.
ids.push(id);
var idin = ids[0];
$('#' + id).delay(1000).fadeOut(750, function() {
$('#' + idin).fadeIn(750, fadeInOut);
});
}
$(document).ready(function(){
fadeInOut();
});Demo with multiple divs
在这里，我只更新了数组，没有代码重复。
var ids=["text-2","text-5","text-6","text-7","text-8","text-9"];
function fadeInOut () {
var id = ids.shift();
ids.push(id);
var idin = ids[0];
$('#' + id).delay(1000).fadeOut(750, function() {
$('#' + idin).fadeIn(750, fadeInOut);
});
}
$(document).ready(function(){
fadeInOut();
});Stack Overflow用户
发布于 2013-05-08 00:38:26
试试这个-
$('#text-2').delay(3000).fadeOut(750, function() {
$('#text-5').fadeIn(750, function() {
$('#text-5').delay(3000).fadeOut(750, function() {
$('#text-2').fadeIn(750,function() {
fadeInOut();
});
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16424120
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号