Fade two stacked texts with jQuery

Question

Based on JQuery fade with loop and delay How can I fade in out two text lines and not overlapping both?

My HTML:

<div id="div_1" style="position:fixed;top:0;left:0;"> aaa bbb ccc ddd eee </div>

<div id="div_2" style="position:fixed;top:0;left:0;"> 111 222 333 444 555 </div>

div_1 is first displayed and faded out, then div_2 fade in, then fade out, then div_1 fade in, and so on

Put this as an edit to your original question and format it as code to make sure it display's correctly. — Abe Miessler, Nov 16 '11 at 00:56
It is something like `
aaa bbb ccc ddd eee

111 222 333 444 555` div_1 is first displayed and faded out, then div_2 fade in, then fade out, then div_1 fade in, and so on — Daniel Franco, Nov 16 '11 at 01:01

score 1 · Answer 1 · answered Nov 16 '11 at 14:47

1

Maybe it is not elegant, but effective.

<script type="text/javascript">

function fade1() {
    $('#div1').delay(2000).fadeIn(2000).fadeOut(2000).delay(2000);
}
function fade2() {
    $('#div2').delay(2000).fadeIn(2000).fadeOut(2000).delay(2000);
}
function fade0() {
    $('#div2').fadeOut(0);
    $('#div2').delay(2000);
}
setInterval('fade1()', 1);
setInterval('fade2()', 1);
</script>

<body onload="fade0(); fade1(); fade2();">

answered Nov 16 '11 at 14:47

Daniel Franco

11
3

It is working fine in Chrome-Mac and safari. In FF7-Linux and Mac behavior is different, not de desired. Also found that after a while, working on other Chorme tabs and returning to my test tab, behavior has changed: both divs are fadeIn and Out at the same time, delay between both is lost. – Daniel Franco Nov 16 '11 at 15:04

score 0 · Accepted Answer · answered Nov 16 '11 at 01:40

0

You can join two objects to be animated together using the .add() function:

$('#div1').add($('#div2')).fadeToggle();

http://api.jquery.com/add/

answered Nov 16 '11 at 01:40

Samuel Liew

76,741
107
159
260

div_1 is first displayed and faded out while div_2 is hidden, then div_2 fade in, then fade out, then div_1 fade in, and so on – Daniel Franco Nov 16 '11 at 12:27
Here's my sample http://jsfiddle.net/ATBDt/2/ I see it good in Chrome Mac. Alternating fading text is displayed without fade overlapping. But... I added a comment in the 2nd. answer up. – Daniel Franco Nov 16 '11 at 15:45
Yes. But boths text overlaying, not in different line. http://jsfiddle.net/ATBDt/6/ The problem here is that I want div1 fade out to white and then, immediately, div2 fade in (not mixed display) – Daniel Franco Nov 16 '11 at 18:10
Great! I reduced time to half to get it similar to ATBDt/2/. I've tested in some OS/browsers and did not find problems. Thanks! – Daniel Franco Nov 16 '11 at 20:48
I had edited the answer and put your /13 code but I still see the old one. Checkmark is already green. – Daniel Franco Nov 16 '11 at 21:58

Fade two stacked texts with jQuery

2 Answers2