我在 iphone 5 上使用 jQuery animate() 函数时遇到了一个非常奇怪的问题。场景:
我将一个事件处理程序附加到元素上的 touchend 事件，从而启动动画。通常这工作得很好。但是，一旦我在该元素上滑动一次滚动页面，动画功能就不再动画(在所有 future 的手势上)。事件被触发并调用处理程序，但 animate 不执行任何操作。我尝试使用 jQuery 移动事件，现在使用 oldscool element.attachaddEventListener ，两者都会产生相同的结果。有趣的是:
- 如果我将它附加到 touchstart，它会在滚动之前和之后工作(但我需要 touchend 事件!)
- 如果我做了一些没有动画的事情，例如切换，它也能工作。
一个小演示页面:
<!DOCTYPE html>
<html>
<head>
<title>Testpage</title>
<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport">
<script src="/3rdParty/scripts/jquery/jquery-1.8.3.js" type="text/javascript"></script>
<style>
body { padding: 10px;}
#mover { position: relative; width: 100px; background-color: red; color: #fff; padding: 5px; }
#hider { width: 100%; overflow: hidden; }
#touchme { border:1px solid #808080; margin-bottom:10px;line-height: 50px; text-align:center;}
</style>
<script>
$(document).ready(function(){
var elem = document.getElementById('touchme');
elem.addEventListener('touchend', positionHandlerEnd, false );
elem.addEventListener('mouseup', positionHandlerEnd, false );
});
</script>
<script>
function positionHandlerEnd(e) {
$('#mover').animate({left: '+=40px'});
e.preventDefault();
return;
}
</script>
</head>
<body>
<div id="touchme">Touch me</div>
<div id="hider"><div id="mover">This moves</div></div>
<div> dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</div>
<div> dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</div>
<div> dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</div>
</body>
</html>
你知道这里到底发生了什么吗？或者有什么解决方法吗？
最佳答案
当我遇到同样的问题时，我偶然发现了 Safari 的“setTimeout bug”。 Safari(在 IOS6 下)似乎在滚动时不执行动画或计时器。我不知道为什么这会影响滚动后的动画，但是 this guy写了一个小脚本来解决我的问题。请务必检查一下:
https://gist.github.com/3755461
我不能 100% 确定它是否会在其他浏览器中导致错误(还没有遇到任何错误，还)，但它拯救了我的一天，我很高兴与您分享.
关于在 iPhone 5 上滚动后 touchend 上的 jQuery 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14354833/