关于使用jquery动画在移动端页面显示变形的问题解决

在做一个网站首页时，加入了一些jquery动画飞入效果  

但是发现一个在移动端显示页面有变形的bug 

如图  在页面没有动态效果没有加载完成前，鼠标可以左右拖动页面，页面右侧会出现空白，下方也有滚动条

 

经过查验，发现是设置动态效果的div中，使用了

 style="opacity:0; left: 100px;"    

 这段代码意思是 先将元素div设置隐藏，并且设置初始位置往右100px的地方，就是这个样式导致了页面整体被撑大了

解决办法也很简单，只要将opacity:0改为 display:none即可

style="display: none; left: -100px;

这样，初始加载时，虽然元素初始位置是在向右100px的地方，但是此时div元素属性的display是none，所以元素是被隐藏状态，因此不会把整体页面撑开（其实当动画加载时，dispaly变为block，还是会撑大页面，只不过动画一般只有一两秒，只有在这一两秒过程中刻意左右滑动页面才会发现页面会撑大留白，而加载完成后页面就正常了。）

 

当然，jquery代码里也要将opacity:1  改为 opacity:"show"

            for (var i=0;i<$(".advantageBox").length;i++){
                var advs = $(".advantageBox")[i];
                $(advs).animate({
                    left:"0",
                    opacity: "show"
                }, 1000 );
            }