淡入和淡出div

Klassik 发表于 Dev

经典的

我的目标是：在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);
}

非常感谢您的帮助。

福斯托（美国）

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。