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一个接一个地淡入淡出，然后同时为它们两个fadeOut。

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

逐渐消失，但随后它们逐渐消失，而不是同时淡出。它看起来很丑陋，因为当h2消失时，它会为p腾出空间，而不是我希望在我的网站上看到的东西。

我做错了什么？我已经坚持了几天，我一直在推迟它，专注于页面的其他方面，但现在应该真的开始工作了。

帮助表示赞赏！

Answer 1

首先，你应该使用绝对位置，这样它们就不会从它们应该的位置跳跃/移动。

然后它同时淡出的原因是因为你使用个人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 2

我做了一个jsFiddle here。

代码：

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

Answer 3

您可以同时添加延迟和淡出，例如DEMO：

$(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处理它。

同时淡出两行文字

3 个答案: