使用 .animate 命令的 jQuery 问题答案

【问题标题】：jQuery Issue Using .animate Command使用 .animate 命令的 jQuery 问题
【发布时间】：2010-12-10 19:47:22
【问题描述】：

http://api.jquery.com/animate/

在此页面上，他们提供了一个演示，其中通过单击按钮使灰色 div 在屏幕上移动。

请注意，如果您单击右键足够多次并且 DIV 块到达容器的末尾，它会创建水平和垂直滚动条。

我下载并修改了代码以摆脱溢出属性，而我目前所拥有的在桌面浏览器中运行良好。

不过，iPhone 上的 Safari 处理事情的方式略有不同。出于某种原因，Safari 完全忽略了溢出属性，而是展开浏览器窗口以显示块移动到的位置。

我不想让你看到这个方块。我希望它隐藏起来，直到你再次按下按钮。

有人知道这是怎么回事吗？

这是问题的图片：

这是我的代码：

div { 
position:absolute; 
background-color:#abc; 
width:100%; 
height:100%;
margin:0px;
max-width:100%;
}

body {
margin:0px;
padding:0px;    
}

* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);  
}
</style>

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>

<body>
<button id="left">&laquo;</button> <button id="right">&raquo;</button>

<div class="block"></div>

<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});

$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});

</script>

即使我已将 DIV 块移出屏幕并且将溢出：隐藏作为全局样式，iPhone 仍会在浏览器窗口中为它腾出空间，以显示 DIV 已移动到的位置。烦人！

提前谢谢你！

【问题讨论】：

标签： iphone jquery html scroll jquery-animate

【解决方案1】：

不完全确定我理解你想在这里完成什么。但是，如果您想让灰色框在文档末尾离开时消失，那么我建议您将 div 包装在另一个 div 中，并将包装元素的宽度设置为 100% 并溢出：隐藏；

像这样：

<div class="wrapper">
  <div class="block"></div>
</div>

同时添加适当的样式：

<style type="text/css">
  ...
  .wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }
</style>

请注意，您还需要绝对定位包装器，否则灰色块在其外部仍然可见。你还需要给它一些高度（我在我的例子中使用了 100%），否则它将是 0px 高（由于绝对定位的孩子）并且什么都不会可见。

希望对您有所帮助。

【讨论】：

这似乎是有道理的，我之前确实尝试过。但是为了它，我完全按照你说的方式再次尝试了它。但是，如果您将块 DIV 包装在包装器中，它会破坏动画。当你现在点击按钮时，什么也没有发生……你觉得呢？我完全迷路了......澄清一下，我希望将整个 DIV 滑出屏幕，直到您再次单击该按钮使其返回时才显示它。试图模仿两个页面之间的过渡，类似于在原生 iPhone 应用程序中浏览菜单时所看到的。
我猜这是由于您移动灰色 div 的方式。 “110%”的含义因父元素而异。我会改用实际的像素值，并在 javascript 中获取父级的宽度。类似于： var offset = $('.wrapper').outerWidth(); $('.block').css({left: offset}); （ps，抱歉格式化，无法在 ipad 上换行：/
是的，但它仍然没有改变这样一个事实，即当您将块包装在包装器 DIV 中时，它会破坏动画功能......

【解决方案2】：

替代

overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}

【讨论】：