gpt4 book ai didi

jQuery 淡入淡出功能不重复

转载 作者:行者123 更新时间:2023-12-01 04:14:16 25 4
gpt4 key购买 nike

我是一个 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>

JS-Fiddle

IN ACTION

最佳答案

完成后,您需要再次调用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com