Question

我正在使用jQuery将div的宽度设置为屏幕的100％。问题是，一旦div 在视觉上扩展到那个宽度，宽度％的实际值会偶尔跳跃，然后最终确定我分配给它的100％的值。问题可以在我录制的this视频中看到。

从视觉上看，该元素仍能正常工作 - 宽度似乎根本没有变化。问题是，我正在使用的视差滚动插件（skrollr）会在滚动时出现故障并闪烁div，直到最终确定该值（我已尝试删除skrollr进行控制测试）。跳转效果仅在将其设置为百分比或vw时发生，将其设置为px中的精确值才能正常工作。

这是我控制的div

<div class="projectContainer" id="A Head In The Box">
        <table class="projectTitle"><td align="right" valign="bottom" ></table>
        <div class="circle"></div><div class="circle"></div><div class="circle"></div>
</div>

控制动画的代码

$(selProject).animate({
            left:'0px',
            top:'0px',
            width:'100%',
            height:'650px',},600,"easeOutQuint");

我已经尝试去除除了这个动画之外的所有代码，但它似乎仍然在做它。如果您想查看源代码，我重新构建了div，并获得了一个工作版here的准系统。我想看到网站的非工作，完整的版本，here。

Answer 1

我似乎设法解决了这个问题，但是在其中一种迂回的方式中，我并不完全确定为什么它已经解决了。

动画被包含在一个函数中，该函数只有在所有其他＆＃34; projectContainer＆＃34; s淡出时才会发生，即：

$(".projectContainer").not(selProject).fadeOut(200,"swing", function(){
   $(selProject).animate({
            left:'0px',
            top:'0px',
            width:'100%',
            height:'650px',},600,"easeOutQuint");
})

当我删除它时，只是将动画设置为延迟，以便在其他元素消失后发生，它奇迹般地起作用。如果有人碰巧知道如何使元素的宽度跳跃数百％，我很想知道：P

在安装到指定的宽度之前，Div宽度会在偶然设置为百分比的情况下跳跃

1 个答案: