0

我正在使用一小段 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 来设置子项的属性以匹配父项的当前宽度而不是父项的最大宽度，但我不知道如何测量当前宽度。除此之外，除了在制作动画时禁用溢出之外，我没有看到其他解决方案，但这似乎并不理想。

有什么建议么？

4

1 回答 1

0

将您的 .tv 设置为 position:absolute 会将其从盒子模型中删除，并使其无法调整其父 div 的大小。给它一个荒谬的左值将确保它在页面加载时呈现在屏幕之外。

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

然后使用 JS 为您的左值设置动画应该会给您相同的效果而不会导致溢出问题。在动画之前，它会将 left 值设置为父 div 的宽度，因此它不会从初始化时使用的荒谬的 left 值开始动画。

$(document).ready(function () {
    $(".tv")
        .css("left", $(".col2").width())
        .animate({left:"50px"},700);
});
于 2012-08-12T13:40:31.483 回答