时间戳

首页 > 解决方案 > 动画文本中的绝对位置弄乱了布局

javascript - 动画文本中的绝对位置弄乱了布局

问题描述

我有一个 div 动画文本。我似乎必须将其设置为“绝对”，否则动画不流畅，但是，因为它是绝对的，所以网站的其余部分忽略了该框，即使我将它包裹在另一个相对的 div 中。

几天来一直在拔头发，非常感谢您的帮助！

HTML：

<div id="cbp-qtrotator" class="cbp-qtrotator">

<div class="cbp-qtcontent current"><blockquote>
<p style="font-family:Arial, Helvetica, sans-serif; font-size: 2em; text-align: center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at augue lectus.</p></blockquote></div>
      
<div class="cbp-qtcontent"><blockquote>
<p style="font-family:'Courier New', Courier, monospace;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at augue lectus.</p></blockquote></div>
      
<div class="cbp-qtcontent"> <blockquote>
<p style="font-family:Arial, Helvetica, sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at augue lectus.</p></blockquote></div>
</div>

CSS：

.cbp-qtrotator {
position: relative;
width: 90%;
max-width: 1225px;
max-height:600px;
margin: 75px auto 25px;
z-index:90;
}

.cbp-qtcontent {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 2;
  display: none
}

.cbp-qtrotator .cbp-qtcontent.current {
  display: block
}

.cbp-qtrotator blockquote {
  margin: 20px 0 0 0;
  padding: 0
}

.cbp-qtrotator blockquote p {
  color: #FFFFFF;
  font-weight: 300;
  margin: 0.4em 0 1em
}

blockquote {border-left: none;}

Javascript：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
<script type="text/javascript">
$(document).ready(function() {
var divs = $('.cbp-qtcontent');
      
function fade() {
var current = $('.current');
var currentIndex = divs.index(current),
nextIndex = currentIndex + 1;
        
if (nextIndex >= divs.length) {
nextIndex = 0;
}
        
var next = divs.eq(nextIndex);
        
next.stop().fadeIn(1500, function() {
$(this).addClass('current');
});
        
current.stop().fadeOut(1500, function() {
$(this).removeClass('current');
_startProgress()

setTimeout(fade, 5000);
});
}

function _startProgress(){
$(".cbp-qtprogress").removeAttr('style');
$(".cbp-qtprogress").animate({
 width:"800px",
} , 5000);
}
        
_startProgress()
setTimeout(fade, 5000);
});
</script>

“cbp-qtcontent” 绝对值导致站点的其余部分没有出现在这个动画文本下，而是出现在它上面。如果我更改或删除它，下一行出现在顶部下方，然后顶部消失，然后第二行向上移动。该网站随之移动，但显然这不是我想要的文本的平滑更改。

谢谢！

标签： javascriptcssanimationposition

解决方案

如果不更改 CSS，我无法让您现有的代码为我显示任何内容。我将您的代码放入小提琴中，并将所有 CSS 替换为以下内容。只有前 2 行很重要，其他的只是为了帮助可视化这些框。

.cbp-qtrotator{position:relative;margin-top:150px;border:1px solid black;background:yellow;height:100px}
.cbp-qtcontent blockquote{position:absolute;background:red;}
.cbp-qtcontent:nth-child(2) blockquote{background:green;}
.cbp-qtcontent:nth-child(3) blockquote{background:blue;}

您的相对容器需要设置其高度。要么将高度固定到足够大，以使您的任何块引用内容都适合，或者您必须使用 javascript 来调整它，具体取决于显示的块引用。固定高度在视觉上可能是一个更好的主意，因为它可以防止页面上的其他元素/内容移动，在我看来这将是糟糕的 UI 设计。

推荐阅读