Question

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

在这个页面上，他们给出了一个演示，只需点击一下按钮就可以在屏幕上移动灰色div。

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

我下载并修改了代码以摆脱溢出属性，到目前为止我在桌面浏览器中的工作非常好。

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

我不希望你能看到这个街区。我希望它隐藏起来，直到你再次按下按钮。

任何人都知道到底发生了什么事？

以下是该问题的图片： alt text

这是我的代码：

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移动到的位置。讨厌！

提前谢谢！

Answer 1

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

像这样：

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

还添加适当的样式：

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

请注意，您还需要绝对定位包装器，否则灰色块仍将在其外部可见。你还需要给它一些高度（在我的例子中我使用了100％）或者它将是0px高（由于绝对定位的孩子）并且没有任何东西可见。

希望有所帮助。

Answer 2

替代

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

jQuery问题使用.animate命令

2 个答案: