Question

我正在使用一小段jquery，除了动画一个看似从屏幕外移动到父div中所需位置的div之外什么也不做。

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

为了开始屏幕外，我确保父div将以最大宽度值和最小宽度值到达屏幕的一侧。然后我将子div设置为margin-left 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我可以用来设置子属性以匹配父级的当前宽度而不是父级的最大宽度，但我无法弄清楚如何测量当前宽度。除此之外，我认为没有其他解决办法在动画制作时不能禁用溢出，但这似乎并不理想。

有什么建议吗？

Answer 1

将.tv设置为position：absolute会将其从box模型中删除，并使其不会调整其父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);
});

jQuery动画最大宽度溢出问题

1 个答案: