使两行文字相形见绌

Question

我是jQuery的新手，我正在开发一个文本推载机。这是一个结构：

HTML：

            <section id="header-fader">
    <h2 id="h2-1" class="fader-h2 fader-all">Title 1</h2>
    <p id="p-1" class="fader-p fader-all">text 1</p>    

    <h2 id="h2-2" class="fader-h2 fader-all">title 2</h2>
    <p id="p-2" class="fader-p fader-all">text 2</p>    

    (more h2 and p goes here)

    </section>

jQUery

$(document).ready(function() {

$('#h2-1').delay(1000).fadeIn(2000);
$('#p-1').delay(3000).fadeIn(2000);
$('fader-all').delay(5000).fadeOut(2000);


$('#h2-2').delay(8000).fadeIn(2000);
$('#p-2').delay(10000).fadeIn(2000);
$('.fader-all').delay(1000).fadeOut(2000);

(more goes here)

});

这个想法是h2和p一个接一个地到fadeIn，然后两者同时到fadeOut。

到目前为止，我已经完成了半衰期

逐渐消失，但它们却一次又一次地淡出，而不是同时消失。它看起来很难看，因为当h2消失的时候，它会使p的空间跳起来--这不是我想在我的网站上看到的东西。

我做错了什么？我已经坚持了好几天了，我一直在推迟，把注意力集中在页面的其他方面，但现在是时候开始工作了。

帮助感激！

Answer 1

您可以同时添加延迟和淡出，比如这个演示。

$(document).ready(function () {

    $('#h2-1').delay(1000).fadeIn(2000).delay(2000).fadeOut(2000);
    $('#p-1').delay(3000).fadeIn(2000).fadeOut(2000);


    $('#h2-2').delay(8000).fadeIn(2000).delay(2000).fadeOut(2000);
    $('#p-2').delay(10000).fadeIn(2000).fadeOut(2000);

});

而且，如果你想让它们从一开始就消失，它们应该从一开始就被隐藏起来。我已经将style="display:none;"添加到了小提琴中的所有元素中，但是您也可以使用jQuery来处理它。

Answer 2

首先，您应该使用绝对位置，这样它们就不会从应该在的位置跳过/move。

那么，它不能同时处理两种褪色的原因是因为你使用个人的id来使它们淡入，所以请坚持把它们淡出。我在下面修正了这一点，并设置了时间，这样它们就会同时淡出。

$(document).ready(function() {

$('#h2-1').delay(1000).fadeIn(2000);
$('#p-1').delay(3000).fadeIn(2000);
$('#h2-1').delay(2000).fadeOut(2000);
$('#p-1').fadeOut(2000);

$('#h2-2').delay(8000).fadeIn(2000);
$('#p-2').delay(10000).fadeIn(2000);
$('#h2-2').delay(2000).fadeOut(2000);
$('#p-2').fadeOut(2000);

});

Answer 3

我做了一个jsFiddle 这里。

守则：

var hDelay = 1000,
    pDelay = 3000,
    fadeOutDelay = 6000;

$('#h2-1').delay(hDelay).fadeIn(2000);
$('#p-1').delay(pDelay).fadeIn(2000);

$('#h2-1').delay(fadeOutDelay - hDelay).fadeOut(2000);
$('#p-1').delay(fadeOutDelay - pDelay).fadeOut(2000);