1

iphone 5 上的 jQuery animate() 函数有一个非常奇怪的问题。场景:

我将事件处理程序附加到元素上的 touchend 事件,开始动画。通常这工作得很好。但是一旦我在这个元素上滑动一次滚动页面,动画功能就不再动画了(在所有未来的手势上)。触发事件并调用处理程序,但 animate 不执行任何操作。我尝试使用 jQuery 移动事件,现在使用 oldscool element.attachaddEventListener 都导致相同的结果。有趣的是:

  1. 如果我将它附加到 touchstart,它会在滚动之前和之后工作(但我需要 touchend 事件!)
  2. 如果我做一些没有动画的事情,例如切换,它也可以工作。

一个小的演示页面:

<!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>

任何想法这里到底发生了什么?或者任何解决方法?

4

3 回答 3

3

As I was struggling with the same problem, I stumbled upon a Safari 'setTimeout bug'. It appears that Safari (under IOS6) doesn't execute animations or timers when scrolling. I have no idea why this influences animations after scrolling, but this guy wrote a little script that solved the problem for me. Be sure to check it out:

https://gist.github.com/3755461

I'm not 100% sure if it will cause errors in other browsers (didn't encounter any, yet), but it saved my day and I'm glad to share it with you.

于 2013-01-20T20:07:49.973 回答
0

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

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

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

.animate 函数在 safari 冻结 DOM 以滚动后不再起作用,但其他一切都起作用,例如 .css。此外,如果 touchend 侦听器函数不调用 .animate,则在滚动后按下覆盖按钮时,.animate 函数会继续工作。

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

在我寻找答案的那一刻对我来说很奇怪的是,在另一个 js 文件中,在同一页面上工作,我可以在滚动后获取日期。

I'm seeing that if the function called on the touchend event does not do an animation, the animate call on this button continues to work. Otherwise it does not.

The following url has a touchend event function that does NOT run .animate :

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

The following url has a touchend event function that DOES run .animate :

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

于 2013-01-20T08:30:16.730 回答
0

I just found a solve. It's a bit of a hack imho, but it worked for me. In the touchend event function, do a setTimeout that calls another function which does the animation.
$("div").bind("touchend",TouchEnd); function TouchEnd (e) { timeout = setTimeout(runanimation, 10); }

It's enough of a delay to avoid the issue of the jquery animate function ceasing to work in safari after touchend / scroll.

于 2013-01-21T18:34:11.727 回答