我有一个问题。我有两个文字。在页面加载时,当第一个文本淡出时,我希望第二个文本在同一行淡入,第二个文本应该保留。这是我的小提琴http://jsfiddle.net/st6rxwjr/1/
这是我的代码:
<div class="text1 animated zoomIn">Welcome to our site</div>
<div class="animated text2 bounceIn">Company Name</div>
CSS:
body { padding-top:30px;}
.text2 {
display: none;
}
div {
font-size:30px;
font-weight:bold;
text-transform:uppercase;
text-align:center;
}
JS:
function fade() {
$('.text1').fadeIn().delay(2000).fadeOut();
$('.text2').delay(2000).fadeIn();
}
fade();
答案 0 :(得分:1)
尝试使用这样的回调函数:
function fade() {
$('.text1').fadeIn().delay(2000).fadeOut(1000,function(){
$('.text2').delay(2000).fadeIn();
});
}
如果你不想要任何慢速淡化,你可以把0而不是1000。
答案 1 :(得分:0)
我认为您需要:Fiddle.
更改Jquery代码text2延迟。你给了2000所以text2将在text1消失之前出现。
function fade() {
$('.text1').fadeIn().delay(2000).fadeOut();
$('.text2').delay(2500).fadeIn();
}
fade();