CODEWITHSUNDEEP
javascriptjqueryhtml
Klassik
Klassik

Reputation: 141

Fade in and out div

My goal: fade in a div with text, after n seconds fade out. Do this again with 4 another divs, without interfere the div before (like showing up when the div before is still on screen) with consistent distances.

Here you can what I want to accomplish: https://www.youtube.com/watch?v=2PsCgs8rVHE (only the first moments).

Probably I am thinking too complicated.

I tried this for some time (hours, eh) now and tried thousand things. Here is my current code:

$('.quote').each(function(divID){
    fadeContent(divID);
});

function fadeContent(childID)
{
    $('.quote:nth-child('+childID+')').fadeIn(1000).delay(8000*childID).fadeOut(1000);
}

Before that I create the divs from array (works fine)

for(var i = 0; i < quotes.length; i++){
    var quote_container = $('<div>').addClass('quote').append(quotes[i]).css('display', 'none');
    $('.quotes').append(quote_container);
}

Appreciate your help a lot.

Upvotes: 2

Views: 148

Answers (2)

fnune
fnune

Reputation: 5494

I had to code this: https://jsfiddle.net/dmpk42vd/

Here's an example of how you might go about it with 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");

EDIT: Added more or less delay depending on text length and made the entire thing work with one class. See comments and answers below for OPs. I also made this a little bit more like Zelda :)

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

Upvotes: 6

gvperkins
gvperkins

Reputation: 178

Here is a slightly more dynamic way, wouldn't require adding additional CSS classes or 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/

Upvotes: 3

Related Questions