Question

我正在制作一个简单的jquery幻灯片，它会改变绝对位于彼此顶部的div的不透明度。我的问题是因为他们绝对定位，他们不再流动，但我需要他们。所以我需要三件事之一。

找到一种不使用绝对位置来叠加div的方法。或

找到一种方法将绝对定位的div放回流中。或

找一种制作幻灯片的方法，而不使用堆叠的div。

HTML：

<body>
I come before<br />
<div id="box_foot">
  <div id="tests">
    <div class="testimony" style="opacity: 1;">
      <div class="bluequote">One</div>
    </div>
    <div class="testimony">
        <div class="bluequote">Multiple lines<br />Multiple lines<br /></div>
    </div>
    <div class="testimony">
      <div class="bluequote">Two</div>
    </div>
    <div class="testimony">
      <div class="bluequote">Three</div>
    </div>
    <div class="testimony">
      <div class="bluequote">Four</div>
    </div>
    <div class="testimony">
      <div class="bluequote">Five</div>
    </div>
    <div class="testimony">
      <div class="bluequote">Six</div>
    </div>
    <div class="testimony">
      <div class="bluequote">Seven</div>
    </div>
  </div>
</div>
I come after<br />
</body>

的CSS：

#box_foot .testimony {
    position:absolute;
    opacity:0;
}

幻灯片放映功能：

$(document).ready(function(){
    var count = 1;
    var $slides = $('.testimony');
    var speed = 1000;

    setInterval(rotQuote,speed);

    function rotQuote(){    
        if(count < $slides.length){
            $('.testimony:nth-child(' + count + ')').animate({opacity:0},1000);
            count++;
            $('.testimony:nth-child(' + count + ')').animate({opacity:1}, 1000);
        } else {
            $('.testimony:nth-child(' + count + ')').animate({opacity:0}, 1000);
            count = 1;
            $('.testimony:nth-child(' + count + ')').animate({opacity:1}, 1000);
        }
    }

    });

http://jsfiddle.net/P48yA/

我可以设置一个固定的高度，但这并不能保证布局/响应的灵活性。

Answer 1

<强>已更新！

为什么不应用CSS类和动画？

这使元素成为文档流程的一部分 - 当它们没有被“显示”时，只需将它们压缩为空白

Demo Fiddle

#box_foot .testimony {
    position:relative;
    opacity:0;
    height:0;
    width:0;
    overflow:hidden;
    transition:opacity 1s ease-in;
}
#box_foot .testimony.show {
    height:auto;
    width:auto;
    -webkit-animation:fader 1s ease-in;
    animation:fader 1s ease-in;
}
@keyframes fader {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

@-webkit-keyframes fader {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

调整后的jQuery：

$(document).ready(function () {
    var count = 1;
    var $slides = $('.testimony');
    var speed = 1000;

    setInterval(rotQuote, speed);

    function rotQuote() {
        if (count < $slides.length) {
            $('.testimony:nth-child(' + count + ')').removeClass('show');
            count++;
            $('.testimony:nth-child(' + count + ')').addClass('show');
        } else {
            $('.testimony:nth-child(' + count + ')').removeClass('show');
            count = 1;
            $('.testimony:nth-child(' + count + ')').addClass('show');
        }
    }

});

Answer 2

你可以让绝对定位的div的父容器有position: relative;，并且它将绝对地从父容器的左上角而不是主体放置它们，然后只给父div一个固定的高度。大到足以显示所有div内容，这将解决问题。它将是响应式的，因为父容器将在流中，并且淡入和淡出的div将相对于父级定位。

我可以让一个绝对定位的div堆栈留在流中吗？

2 个答案:

Demo Fiddle