我是一个 jQuery 菜鸟，正在尝试学习它，但我遇到了问题。我不希望我的 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>
最佳答案
完成后，您需要再次调用 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();
<强> jsFiddle example
关于jQuery 淡入淡出功能不重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16424120/