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

我在我的網站上做了一個帶有引號的淡出文本，共有4個標籤。由於一些奇怪的原因，後面的2個標籤與2個第一個標籤的位置不同。當標籤淡出，我可以看到在從第二個標籤到第三個標籤的變化中，文本在頁面上的位置有一個跳躍，並且它也推動了整個頁面的其餘部分（這是關於10-20px移動）。淡入/淡出（在jquery中）文本更改頁面上的位置

我試了一下：

刪除整個主體內容，只留下衰落標籤。
標籤更改爲數字的文本（0，1，2和3）
刪除所有其他的CSS的東西只剩下褪色標籤類CSS
刪除標籤類的所有CSS（它的。引號）除了display: none;（這是什麼使淡出成爲可能）。
刪除display: none;部分 - 結果是我可以看到所有的標籤，與第二和第三標籤之間的空間...
放入DIV HTML部分，並給它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代碼從答案here

來源

2013-09-30 Aviel Gross

你的腳本工作的罰款。檢查的jsfiddle我創造 - http://jsfiddle.net/saranyaciet/qypKK/ –