文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery动画最大宽度溢出问题

问jQuery动画最大宽度溢出问题
EN

Stack Overflow用户

提问于 2012-08-12 06:26:23

回答 1查看 1.3K关注 0票数 0

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

有什么建议吗？

javascript

jquery

css

html

回答 1

Stack Overflow用户

发布于 2012-08-12 21:40:31

将.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);
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11918157

复制

相似问题

问jQuery动画最大宽度溢出问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery动画最大宽度溢出问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery动画最大宽度溢出问题
EN