iphone 5 の jQuery animate() 関数にかなり奇妙な問題があります。シナリオ:
要素の touchend イベントにイベント ハンドラーをアタッチし、アニメーションを開始します。通常、これはかなりうまく機能します。しかし、この要素を 1 回スワイプしてページをスクロールするとすぐに、アニメーション機能は (今後のすべてのジェスチャーで) アニメーション化されなくなります。イベントが発生し、ハンドラーが呼び出されますが、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>
ここで何が起こっているのか、何か考えはありますか? または回避策はありますか？