淡入/淡出（在Jquery中）文本更改页面上的位置

Question

I did a fading text with quotes on my website, with total of 4 labels. 我在网站上用引号引起了褪色的文字，总共有4个标签。 For some weird reason the 2 later labels are not at the same position as the 2 first labels. 出于某些奇怪的原因，后两个标签与前两个标签不在同一位置。 As the labels fade out and in I can see that in the change from the 2nd label to the 3rd label there is a jump in the position of the text on the page, and it also pushes the entire rest of the page down (it's about 10-20px moevement). 随着标签逐渐淡出，我可以看到在从第二个标签到第三个标签的更改中，页面上文本的位置发生了跳跃，并且还向下推了整个页面的其余部分（大约10-20px像素）。

What I tried: 我试过的

Deleting the entire body content leaving only the fading label. 删除整个身体内容，仅留下褪色标签。
Change the texts on the label to numbers (0, 1, 2 and 3) 将标签上的文本更改为数字（0、1、2和3）
Delete all the other CSS stuff leaving only the fade labels class CSS 删除所有其他CSS内容，仅保留淡入淡出标签类CSS
Delete all the CSS of the label class (it's .quotes) except the display: none; 删除除display: none;之外的所有标签类的CSS（即.quotes） display: none; (which is what makes the fade possible). （这是使淡入淡出成为可能的原因）。
Delete the display: none; 删除display: none; part - result is I can see all the labels with the space between the 2nd and 3rd label... 部分-结果是我可以看到所有标签，其中第二和第三标签之间有空格...
Put the html part in DIV and give it height: 100px; width: 100%; 将html部分放入DIV中并赋予其height: 100px; width: 100%; height: 100px; width: 100%; (Did nothing) （什么也没做）
Add more labels - First 2 (index 0, 1) are at right position, next 8 are lower (index 2-9), then index 10 and 11 are bringing the page back up but don't go up themselves, then array starts from 0 again and on index 0 the label jumps up again the the desired position. 添加更多标签-前2个（索引0、1）在正确的位置，下8个索引在较低的位置（索引2-9），然后索引10和11使页面重新备份，但自身不向上，然后数组开始从0再次从索引0开始，标签再次跳至所需位置。 (Maybe aliens took over my computer?) （也许外星人接管了我的计算机？）

This is the CSS: 这是CSS：

        .quotes {
        display: none;
        text-align: center;
        font-family: 'Alef Hebrew', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #999999;
    }

This is the JS (jQuery...): 这是JS（jQuery ...）：

        $(function() {

        var quotes = $(".quotes");
        var quoteIndex = -1;

        function showNextQuote() {
            ++quoteIndex;
            quotes.eq(quoteIndex % quotes.length)
                    .fadeIn(800)
                    .delay(800)
                    .fadeOut(800, showNextQuote);
        }

        showNextQuote();
    })();

This is the HTML part: 这是HTML部分：

    <h1 class="quotes">text1</h1>
    <h1 class="quotes">text2</h1>
    <h1 class="quotes">text3</h1>
    <h1 class="quotes">text4</h1>

This is the page structure: 这是页面结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=false;">
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200' rel='stylesheet' type='text/css'>
    <title>...</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {

        var quotes = $(".quotes");
        var quoteIndex = -1;

        function showNextQuote() {
            ++quoteIndex;
            quotes.eq(quoteIndex % quotes.length)
                    .fadeIn(800)
                    .delay(800)
                    .fadeOut(800, showNextQuote);
        }

        showNextQuote();
    })();
</script>
<style>
    @import url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css);

    .quotes {
        display: none;
        text-align: center;
        font-family: 'Alef Hebrew', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #999999;
    }

    /*#quotes-block {*/
        /*height: 100px;*/
        /*width: 100%;*/
        /*background-color: #bb5ef2;*/
    /*}*/
.
.
.
.
    @media (width: 640px), (width:320px) {...}
</style>
</head>
<body>
<header>
    <img src="logo.png">
</header>
<!--<div id="quotes-block">-->
    <h1 class="quotes">text1</h1>
    <h1 class="quotes">text2</h1>
    <h1 class="quotes">text3</h1>
    <h1 class="quotes">text4</h1>
<!--</div>-->

<img class ="circle" src="circle.png">
<div id="block">...</div>
<img class ="circle" src="circle.png">
<footer>...</footer>

Also, I used the jQuery code from the answer here 另外，我在这里使用答案中的jQuery代码

Answer 1

You have a special character ( some sort of bullet point ) after the closing tag </h1> of the text2 line. 在text2行的结束标记</h1>之后，您有一个特殊字符（ 某种形式的项目符号 ）。

在此处输入图片说明

if you remove it, it will work just fine.. 如果将其删除，它将可以正常工作。

See http://jsfiddle.net/FbmwD/ 参见http://jsfiddle.net/FbmwD/

淡入/淡出（在Jquery中）文本更改页面上的位置

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-09-30 09:26:07

淡入/淡出（在Jquery中）文本更改页面上的位置

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-09-30 09:26:07

解决方案1
1 已采纳 2013-09-30 09:26:07