我的目标:淡入带有文本的 div,n 秒后淡出。用另外 4 个 div 再次执行此操作,而不会干扰之前的 div(比如当之前的 div 仍在屏幕上时出现)并保持一致的距离。
在这里你可以完成我想要完成的事情:https://www.youtube.com/watch?v=2PsCgs8rVHE (只有最初的时刻)。
可能是我想的太复杂了
我现在尝试了一段时间(几个小时,嗯)并尝试了数千种方法。这是我当前的代码:
$('.quote').each(function(divID){
fadeContent(divID);
});
function fadeContent(childID)
{
$('.quote:nth-child('+childID+')').fadeIn(1000).delay(8000*childID).fadeOut(1000);
}
在此之前,我从数组创建 div(工作正常)
for(var i = 0; i < quotes.length; i++){
var quote_container = $('<div>').addClass('quote').append(quotes[i]).css('display', 'none');
$('.quotes').append(quote_container);
}
非常感谢您的帮助。
最佳答案
我必须编码:https://jsfiddle.net/dmpk42vd/
下面是一个您可以如何使用 jQuery 实现它的示例:
$(".txt1").fadeIn("slow").delay(4000).fadeOut("slow");
$(".txt2").delay(6000).fadeIn("slow").delay(4000).fadeOut("slow");
$(".txt3").delay(12000).fadeIn("slow").delay(4000).fadeOut("slow");
$(".txt4").delay(18000).fadeIn("slow").delay(4000).fadeOut("slow");
$(".txt5").delay(24000).fadeIn("slow").delay(4000).fadeOut("slow");
编辑:根据文本长度添加或多或少的延迟,并使整个事情在一个类中工作。请参阅下面的 OP 评论和答案。 我也让这个更像塞尔达:)
https://jsfiddle.net/dmpk42vd/2/
var delay = 0;
$('.txt').each(function (index) {
$('.txt').eq(index).delay(delay).fadeIn("slow").delay($(this).text().length * 30).fadeOut("slow");
delay += 6000;
});
关于javascript - 淡入淡出div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37049921/