1

我在我的网站上做了一个带有引号的淡化文本，总共有 4 个标签。由于某些奇怪的原因，后面的 2 个标签与前面的 2 个标签的位置不同。随着标签淡出，我可以看到在从第二个标签到第三个标签的变化中，页面上文本的位置发生了跳跃，并且它还将整个页面的其余部分向下推（大约10-20 像素的运动）。

我尝试了什么：

  • 删除整个正文内容，只留下淡入淡出的标签。
  • 将标签上的文本更改为数字（0、1、2 和 3）
  • 删除所有其他 CSS 内容，只留下淡入淡出标签类 CSS
  • 删除标签类的所有 CSS（它是 .quotes），除了display: none;（这使淡入淡出成为可能）。
  • 删除display: none;部分 - 结果是我可以看到所有标签，第二个和第三个标签之间有空格......
  • 将html部分放入DIV并给它height: 100px; width: 100%;（什么也没做）
  • 添加更多标签 - 前 2 个（索引 0、1）在正确的位置，接下来的 8 个较低（索引 2-9），然后索引 10 和 11 将页面带回，但不会自行上升，然后数组开始再次从 0 开始，在索引 0 上，标签再次向上跳到所需位置。（也许外星人接管了我的电脑？）

这是CSS：

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

这是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();
    })();

这是 HTML 部分：

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

这是页面结构：

<!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>

另外，我在这里使用了答案中的 jQuery 代码

4

1 回答 1

1

在行的结束标记之后有一个特殊字符（某种项目符号） 。</h1>text2

在此处输入图像描述

如果你删除它，它会工作得很好..

见http://jsfiddle.net/FbmwD/

于 2013-09-30T09:26:07.330 回答