iphone 5 上的 jQuery animate() 函数有一个非常奇怪的问题。场景:
我将事件处理程序附加到元素上的 touchend 事件,开始动画。通常这工作得很好。但是一旦我在这个元素上滑动一次滚动页面,动画功能就不再动画了(在所有未来的手势上)。触发事件并调用处理程序,但 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>
任何想法这里到底发生了什么?或者任何解决方法?