Question

我的目标：在n秒淡出后用文字淡入div。用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);
}

非常感谢你的帮助。

Answer 1

我必须对此进行编码：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");

编辑：根据文本长度添加或多或少的延迟，并使整个过程适用于一个类。请参阅下面的评论和答案。我也让这更像是塞尔达：）

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;
});

Answer 2

这是一种稍微更动态的方式，不需要添加额外的CSS类或Jquery

var delay = 0;
$('.quote').each(function (index) {
   $('.quote').eq(index).delay(delay).fadeIn("slow").delay(4000).fadeOut("slow");
   delay += 6000;
});

https://jsfiddle.net/80w1hnqh/

淡入淡出div

2 个答案: