Question

我在jQuery中有一个基本的幻灯片正常工作，除了当内容淡入时，它从顶部或底部淡入。我真的不知道为什么会这样。我基本上希望文本保持在屏幕的中心（水平和垂直），然后淡出＆amp;在现场。

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

默认情况下，您的元素使用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

Answer 2

试试这个：

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

Simpel文字幻灯片表现得很奇怪

2 个答案: