Question

我对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>

任何想法究竟发生了什么？或任何worksrounds？

Answer 1

当我遇到同样的问题时，我偶然发现了一个Safari'setTimeout bug'。似乎Safari（在IOS6下）在滚动时不执行动画或计时器。我不知道为什么这会在滚动后影响动画，但是this guy写了一个小脚本来解决我的问题。请务必查看：

https://gist.github.com/3755461

我不是百分百确定它是否会导致其他浏览器出现错误（没有遇到任何尚未），但它节省了我的一天，我很高兴与你分享

Answer 2

我无法用你的代码复制问题，但我现在遇到了类似的问题。

我有一个覆盖按钮，可以在图像的左侧位置运行动画，仅用于测试.animate是否有效。

我还有一个touchend eventListener，它调用一个函数，该函数使用.animate在触摸后将img捕捉到特定位置。

在safari将DOM冻结为滚动之后，.animate函数不再有效，但其他所有内容都会起作用，例如.css。此外，如果touchend侦听器功能未调用.animate，则在滚动后按下覆盖按钮时.animate功能将继续工作。

我已经通过简化代码的动作，但这个问题仍然存在。如果我使用js addEventListener或jquery .bind，则无关紧要。所以我开始慢慢通过jquery代码添加日志语句（打印到页面中的div）并注意到jQuery.now（）函数在滚动后停止返回当前日期，这实际上运行了一个js函数：new Date（）。我想知道它是否与safari冻结DOM有关，但我似乎无法找到更多。这似乎没有发生在Android上。

当我寻找答案的时候，对我来说有什么奇怪的是，在另一个js文件中，在同一页面上工作，我可以在滚动后得到日期。

我看到如果调用touchend事件的函数没有动画，则此按钮上的动画调用继续有效。否则就不会。

以下网址的touchend事件函数不会运行.animate：

http://selfconstruc.tv/code/jquery-touchmove/test1.html

以下网址有一个touchend事件函数，可以运行.animate：

http://selfconstruc.tv/code/jquery-touchmove/test2.html

Answer 3

我刚刚找到了解决办法。这是一个黑客imho，但它对我有用。在touchend事件函数中，执行一个setTimeout，调用另一个执行动画的函数 $（ “格”）绑定（ “touchend”，TouchEnd）; 功能TouchEnd（e） { timeout = setTimeout（runanimation，10）; }

足以延迟以避免jquery动画函数在touchend / scroll之后停止在safari中工作的问题。

在iPhone5上滚动后，在touchend上进行jQuery动画

3 个答案: