jquery fade OUT individual letters

[piearcy]

I forgot my password for my old account so had to create a new one. New laptop. 

 

Anyway, I've searched and searched but can't find a jQuery, javascript or anything else to do what I want to do. I want to fade out all the different paragraphs of a div one letter at a time starting with the first. 

 

Here is something CLOSE though the string has to be input. I'm pulling data in from a database with PHP. So not sure if I can target individual letters in different paragraphs. 

$(function () {
    var string = " David";
    var q = jQuery.map(string.split(''), function (letter) {
        return $('<span>' + letter + '</span>');
    });

    var dest = $('#fadeIn');

    var c = 0;
    var i = setInterval(function () {
        q[c].appendTo(dest).hide().fadeIn(1000);
        c += 1;
        if (c >= q.length) clearInterval(i);
    }, 1000);
});

I know I can get my target from a div then split it into characters with something like this: 

function arrayMe(string) {

	// For all matching elements
	$(string).each(function() {

		var myStr = $(this).html();

		myStr = myStr.split("");

		var myContents = "";
		for (var i = 0, len = myStr.length; i < len; i++) {
			myContents += '' + myStr[i] + '';
		}

		$(this).html(myContents);
	});
}

Then call the function:

$('document').ready(function() {
	var myStringType = $('.sample-text');
	arrayMe(myStringType);
});

Where my div as a class of sample-text. (These are just code snippets I have pulled from the net in my search for an answer).

 

But using the fade in which nice in jsfiddle, How can I put all these together to fade out my text a single letter at a time? I'm not sure if different paragraphs will work or not or if I'm going to have to have one long paragraph (bad for my application). 

 

Thanks for the help here guys. You've always come through for me before. It's just been awhile since I've been stumped. 

[CroNiX]

I know it would look cool, but that will take a lot of processing to do that and most likely it wouldn't be smooth and would end up being jerky, especially on mobile/slower devices. I've done it for single letters in a word, but not each letter of an entire paragraph, or even worse multiple paragraphs. It would probably be better doing words instead of letters.

[piearcy]

I know it would look cool, but that will take a lot of processing to do that and most likely it wouldn't be smooth and would end up being jerky, especially on mobile/slower devices. I've done it for single letters in a word, but not each letter of an entire paragraph, or even worse multiple paragraphs. It would probably be better doing words instead of letters.

Thanks CroNix, and I agree. I've actually moved the elements and it was indeed jerky. I've done this with both javascript and HTML5 canvas and it had the same effect. The reason I was looking at a fade is because it would look better than simply making the letter disappear, or at least it did in the David example above. I considered a div over the text that comes down and hides with a gradient to transparent to accomplish the fade effect as well but then I'm line by line instead of letter by letter. Unless I have two separate div's working together and I thought that was just crazy. 

 

Word by word may work. This is basically a speed reading tutorial and I'm removing text at a certain rate of speed depending on how they scored on the retention test. So I need it to be smooth with a variable I can change the value to either speed it up or slow it down. 

 

ANY suggestion as to how accomplish this would be appreciated. 

 

Again, thanks for the reply.

[CroNiX]

Maybe instead of using jQuery's fade(), which cycles through hundreds of transparency levels, make your own "effect" and only use 3 colors of gray going from dark to white. So instead of hundreds of transitions/character or word, it is only cycling through 3 or so. If it's transitioning from word to word fast enough, the illusion would be kind of the same but spare a lot of processing overhead. On my way out the door, but if I think of it later I can play around with it and see if I can come up with something efficient and useful.

[piearcy]

Good thinking. Appreciate the thoughts and what else you may come up with. 

[Richard_Grant]

Cronix is wrong, it would not use alot of processing

 

Dont use any libraries.. you newb..

 

Get the number of paragraphs, then the number of letters in the paragraph (ignoring spaces).

Then surround each letter with a span with an id of the current increment

then create an animation to fade out a range of spans.

 

Not that hard really.