Issue with fading and <<timed>>

Question

Hello there, 

I'm trying to have a text fade-in when it appears. If I don't use <<timed>>,  "<span class='fadeIn2'>Meanwhile...</span>" works, along with this javascript.

postdisplay['fadeIn-text'] = function (taskName) {
	$('.fadeIn2').hide().fadeIn(4000);
    // change 10000 to whatever time you want, in milliseconds
};

The issue is: it seems the fading begins even before the text is called by the <<timed>> macro. 

<<timed 4s>>
<span class='fadeIn2'>Meanwhile...</span>
<</timed>>

Won't show any fade In. 

What to do then?... Thanks a lot.

Answer 1

Use css for the fade in effect instead:

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

Then the following works:

<<timed 4s>>
<span class='fade-in'>Meanwhile...</span>
<</timed>>

 

Comments

Works alright, thanks !

Answer 2

As an alternate way of fading in your text you could use the following code.  First, put this in your Stylesheet section:

.delayed {
    opacity: 0;
}

Then put this in your JavaScript section:

/* Delayed Text code - Start */
$(document).on(':passagerender', function (ev) {
	// Find all elements containing the delayed class.
	var elems = $(ev.content).find('.delayed');
	// Appearance delay (in milliseconds) between each delayed text block.
	var delay = 1000; // 1 second fade-in
	if (elems.length > 0) {
		elems.each(function (i) {
			$(this)
				.delay(delay * (i + 1))
				.fadeTo(delay, 1);
		});
	}
});
/* Delayed Text code - End */

Now to have your text appear delayed, just put "@@.delayed; ...your text here... @@" around your text, like this:

First paragraph (non-delayed).
@@.delayed;Second paragraph.@@
@@.delayed;Third paragraph.@@
@@.delayed;Fourth paragraph.@@

That will cause each successive ".delayed" block to appear one after another.

Hope that helps!  :-)

Comments

Works as well, thanks !