1
後我與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功能。但是這並沒有真正解決問題，只是試圖繞過它。你的解決方案會好得多。謝謝！ –