Simpel文本幻燈片表現奇怪

Question

我有一個基本的幻燈片在jQuery中的工作正常，除了當內容淡入淡入從頂部或從底部。我真的不知道爲什麼會發生這種情況。我基本上希望文本留在屏幕的中心（水平和垂直方向），並在原地淡出&。

HTML：

<div id="open-menu"> 
      <div class="index"> 

       <div class="sp"> 
        <h1>HEADING 1</h1> 
      <p>Text</p> 
       </div> 

       <div class="sp"> 
        <h1>HEADING 2</h1> 
        <p>Text</p> 
       </div> 

       <div class="sp"> 
        <h1>HEADING 3</h1> 
        <p>Text</p> 
     </div> 

       <div class="sp"> 
        <h1>HEADING 4</h1> 
        <p>Text</p> 
     </div> 

       <div class="sp"> 
        <h1>HEADING 5</h1> 
        <p>Text</p> 
     </div> 

       <div class="sp"> 
        <h1>HEADING 6</h1> 
        <p>Text</p> 
       </div> 

      </div> 

    <div id="button-previous">prev</div> 
    <div id="button-next">next</div> 
</div> 

CSS：

#open-menu { 
    position:fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    z-index: 50; 
    background: #fff; 
    text-align: center; 
} 

#open-menu .index { 
    position: fixed; 
    transform: translate(-50%, -50%); 
    top: 54%; 
    left: 50%; 
} 

#open-menu .index h1 { 
    font-size: 2rem; 
    line-height: 3.2rem; 
    -webkit-font-smoothing: subpixel-antialiased; 
} 

#open-menu .index p { 
    margin: 2rem 0 0 0; 
    font-size: 1.25rem; 
    line-height: 2.2rem; 
} 

#center-2 { 
    display: table; 
    margin: 0 auto; 
    font-size: 1.25rem; 
} 

.sp {margin-bottom: 60px;} 
#button-previous {float: left;} 
#button-next {float: right;} 

的jQuery：

$(document).ready(function(){ 
      $('.sp').first().addClass('active'); 
      $('.sp').hide();  
      $('.active').show(); 

     $('#button-next').click(function(){ 
      $('.active').removeClass('active').addClass('oldActive');  

       if ($('.oldActive').is(':last-child')) { 

        $('.sp').first().addClass('active'); 

       } 

       else { 

        $('.oldActive').next().addClass('active'); 

       } 

      $('.oldActive').removeClass('oldActive'); 
      $('.sp').fadeOut(); 
      $('.active').fadeIn(); 

     }); 

     $('#button-previous').click(function(){ 
      $('.active').removeClass('active').addClass('oldActive');  

       if ($('.oldActive').is(':first-child')) { 

        $('.sp').last().addClass('active'); 
       } 

       else { 

        $('.oldActive').prev().addClass('active'); 
       } 

      $('.oldActive').removeClass('oldActive'); 
      $('.sp').fadeOut(); 
      $('.active').fadeIn(); 
     }); 
    }); 

的jsfiddle： https://jsfiddle.net/dgy740g3/

Answer 1

試試這個：

$(document).ready(function(){ 
      $('.sp').first().addClass('active'); 
      $('.sp').hide();  
      $('.active').show(); 

     $('#button-next').click(function(){ 

    $('.active').fadeOut('slow',function(){ 
     $(this).removeClass('active'); 
     if($(this).is(':last-child')) 
     { 
     $('.sp').first().addClass('active').fadeIn(); 
     } 
     else 
     { 
     $(this).next().addClass('active').fadeIn(); 
     } 
    }); 

     }); 

     $('#button-previous').click(function(){ 
      $('.active').fadeOut('slow',function(){ 
     $(this).removeClass('active'); 
     if($(this).is(':first-child')) 
     { 
     $('.sp').last().addClass('active').fadeIn(); 
     } 
     else 
     { 
     $(this).prev().addClass('active').fadeIn(); 
     } 
    }); 
     }); 
    }); 

更新小提琴： https://jsfiddle.net/riazxrazor/dgy740g3/1/

Answer 2

默認情況下，eleme nts使用position: fixed，這意味着它們會影響彼此在頁面上的位置。如果將它們更改爲position: absolute，那麼當它們在頁面上的顯示被更改時，它們將不再彼此推動。

position: absolute用於相對於沒有position: fixed設置的最近的父元素來定位它們，因此您還需要將容器元素更新爲position: relative。

.index {position: relative;} 
.sp {margin-bottom: 60px; position: absolute;} 

https://www.w3schools.com/css/css_positioning.asp