用jQuery淡化两个堆叠的文本



基于JQuery淡出与循环和延迟我怎样才能淡出两个文本行,而不是重叠两者?

我的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首先显示并淡出,然后div_2淡出,然后淡出,然后div_1淡出,依此类推

可能不太优雅,但很有效。

<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();">

您可以使用.add()函数将两个要动画的对象连接在一起:

$('#div1').add($('#div2')).fadeToggle();
http://api.jquery.com/add/

相关内容

  • 没有找到相关文章

最新更新