Fade two stacked texts with jQuery

StackOverflow https://stackoverflow.com/questions/8145039

  •  01-03-2021
  •  | 
  •  

質問

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

役に立ちましたか？

解決

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

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

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

他のヒント

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();">
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top