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

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

jquery html css

淡入/淡出（在Jquery中）文本更改页面上的位置,jquery,html,css,Jquery,Html,Css,我在我的网站上做了一个带引号的淡入淡出文本，总共有4个标签。出于某种奇怪的原因，后面的两个标签与前面的两个标签不在同一位置。当标签淡入淡出时，我可以看到从第二个标签到第三个标签的变化，页面上文本的位置有一个跳跃，它也会向下推动页面的整个剩余部分（大约10-20px移动）我尝试的是：删除整个正文内容，只留下淡入淡出的标签将标签上的文本更改为数字（0、1、2和3）删除所有其他CSS内容，只留下淡入标签类CSS 删除标签类的所有CSS（它是.quotes），除了display:none（这

我在我的网站上做了一个带引号的淡入淡出文本，总共有4个标签。出于某种奇怪的原因，后面的两个标签与前面的两个标签不在同一位置。当标签淡入淡出时，我可以看到从第二个标签到第三个标签的变化，页面上文本的位置有一个跳跃，它也会向下推动页面的整个剩余部分（大约10-20px移动）

我尝试的是：

删除整个正文内容，只留下淡入淡出的标签
将标签上的文本更改为数字（0、1、2和3）
删除所有其他CSS内容，只留下淡入标签类CSS
删除标签类的所有CSS（它是.quotes），除了
```
display:none（这使淡入淡出成为可能）
```


删除显示：无部分-结果是，我可以看到所有标签的第二和第三标签之间的空间

把html部分放在DIV中，给它height:100px；宽度：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…）：
这是HTML部分：
    <h1 class="quotes">text1</h1>
    <h1 class="quotes">text2</h1>
    <h1 class="quotes">text3</h1>
    <h1 class="quotes">text4</h1>

text1
文本2
文本3
文本4

这是页面结构：
<!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>


...
$（函数（）{
var报价=$（“.quotes”）；
var quoteIndex=-1；
函数showNextQuote（）{
++报价索引；
quotes.eq（quoteIndex%quotes.length）
法丹先生（800）
.延迟（800）
.淡出（800，显示下一步）；
}
showNextQuote（）；
})();
@导入url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css);
.引用{
显示：无；
文本对齐：居中；
字体系列：“Alef希伯来语”、“Helvetica Neue”、Helvetica、Arial、无衬线；
颜色：#999999；
}
/*#引号块{*/
/*高度：100px*/
/*宽度：100%*/
/*背景色：#bb5ef2*/
/*}*/
.
.
.
.
@介质（宽度：640px），（宽度：320px）{…}
文本1
文本2
文本3
文本4
...
...



此外，我还使用了答案中的jQuery代码您在text2
行的结束标记
后有一个特殊字符（某种项目符号）

如果你把它取下来，它就可以正常工作
请参见您在text2
行的结束标记
后有一个特殊字符（某种类型的项目符号）

如果你把它取下来，它就可以正常工作
看天哪，这太荒谬了。。。还有，我觉得自己很愚蠢，但你是怎么看的？我甚至不能突出显示…@AvielGross我将你的代码复制/粘贴到了jsfiddle…，我为clarityOmg的答案添加了一个屏幕截图，这太可笑了。。。我也觉得自己很愚蠢，但你是怎么看的？我甚至不能突出显示它…@AvielGross我将你的代码复制/粘贴到了jsfiddle…，我在我的答案中添加了一个屏幕截图，以说明你的脚本工作得很好。检查我创建的JSFIDLE-您的脚本工作正常。检查我创建的JSFIDLE-
<!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>