jQuery 动画处理最大宽度溢出问题

jQuery animate max-width overflow issues

本文关键字：溢出 出问题 动画 处理 jQuery      更新时间：2023-09-26

我正在使用一小段jquery，它只不过是动画一个div，该div似乎从屏幕外移动到父div中所需的位置。

$(document).ready(function()
{$(".tv").animate({marginLeft:"50px"},700);

为了在屏幕外开始，我确保父div 将以最大宽度值和最小宽度值到达屏幕一侧。然后，我将子div 设置为左边距 100%，我假设这将相对于父级的当前宽度，但显然不是。使用最大宽度时，子项从父项的边缘开始，并且没有溢出问题。但是，当使用最小宽度或窗口没有那么宽时，子项仍会从最大宽度位置进行动画处理，并创建溢出。

.col2 {
position:relative;
max-width:1200px;
min-width:400px;
height:600px;
margin-left:0px;
float:left;
overflow:hidden;
}
.tv {
margin-left:100%;
height:224px;
width:374px;
background-image:url('image/tv.png');
display:block;
}

虽然我知道这可以通过使用百分比无缝工作，但屏幕左侧有一列必须保持相同的宽度，所以据我所知这不是一个选项。我还想避免删除整个文档的溢出。

我想有几行jQuery或javascript可以用来设置子项的属性以匹配父项的当前宽度而不是父项的最大宽度，但是我不知道如何测量当前宽度。除此之外，除了在动画制作时禁用溢出之外，我认为没有其他解决方案，但这似乎并不理想。

有什么建议吗？

将 .tv 设置为 position：absolute 将把它从盒子模型中删除，并阻止它调整其父div 的大小。 给它一个荒谬的左值将确保它在页面加载时呈现在屏幕上。

.tv {
height:224px;
width:374px;
background-image:url('image/tv.png');
position: absolute;
left: 10000px
}

然后，使用 JS 对左侧值进行动画处理应该可以为您提供相同的效果，而不会引起溢出问题。 在动画化之前，它将左值设置为父div 的宽度，因此它不会从初始化时使用的荒谬的左值开始动画。

$(document).ready(function () {
    $(".tv")
        .css("left", $(".col2").width())
        .animate({left:"50px"},700);
});
相关文章：