Simpel文本幻灯片表现奇怪

我有一个基本的幻灯片在jQuery中的工作正常，除了当内容淡入淡入从顶部或从底部。我真的不知道为什么会发生这种情况。我基本上希望文本留在屏幕的中心（水平和垂直方向），并在原地淡出&。Simpel文本幻灯片表现奇怪

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/

来源

2017-06-17 Lavonen

试试这个：

$(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/

来源

2017-06-17 15:35:04

默认情况下，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

来源

2017-06-17 15:30:20

雅他的CSS也产生了一些问题......最初我虽然也使用CSS来解决这个问题。 bt我是jst用js做的。 –

Simpel文本幻灯片表现奇怪

回答

相关问题