后我与jQuery的动画()函数的一个非常奇怪的问题,在iPhone 5的情景:上touchend jQuery的动画滚动上的iPhone5
附上一份事件处理程序touchend事件的元素上,开始动画。通常这工作得很好。但是,一旦我滑动页面,一旦滑动到此元素上,动画功能就不再生成动画了(关于所有未来的手势)。事件被解雇并且处理程序被调用,但动画不会执行任何操作。我试着用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>
任何想法究竟是什么发生在这里?或任何workarrounds?
这真的很有趣,谢谢。我没有发现这是导致这些问题的超时时间。我发现了一个解决方案,但它的工作原理很奇怪:我为jQuery添加了一个插件,如果可能的话,它会使用CSS3翻译。因此,在iOS6的Safari上,使用了CSS3翻译,并且在旧版浏览器中幸运地看起来没有这个问题(我用旧的iPod touch进行了检查,它的工作原理类似于魅力),将使用jQuery功能。但是这并没有真正解决问题,只是试图绕过它。你的解决方案会好得多。谢谢! –