2013-01-16 15 views
1

后我与jQuery的动画()函数的一个非常奇怪的问题,在iPhone 5的情景:上touchend jQuery的动画滚动上的iPhone5

附上一份事件处理程序touchend事件的元素上,开始动画。通常这工作得很好。但是,一旦我滑动页面,一旦滑动到此元素上,动画功能就不再生成动画了(关于所有未来的手势)。事件被解雇并且处理程序被调用,但动画不会执行任何操作。我试着用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> 

任何想法究竟是什么发生在这里?或任何workarrounds?

回答

3

由于我在同一个问题上苦苦挣扎,我偶然发现了Safari的setTimeout bug。看起来,Safari(在IOS6下)在滚动时不执行动画或定时器。我不知道为什么这会在滚动后影响动画,但this guy写了一个小脚本来为我解决问题。一定要检查一下:

https://gist.github.com/3755461

我不是100%肯定这是否会导致其他浏览器错误(没有遇到什么,),但我的天,我救了很高兴与你分享。

+0

这真的很有趣,谢谢。我没有发现这是导致这些问题的超时时间。我发现了一个解决方案,但它的工作原理很奇怪:我为jQuery添加了一个插件,如果可能的话,它会使用CSS3翻译。因此,在iOS6的Safari上,使用了CSS3翻译,并且在旧版浏览器中幸运地看起来没有这个问题(我用旧的iPod touch进行了检查,它的工作原理类似于魅力),将使用jQuery功能。但是这并没有真正解决问题,只是试图绕过它。你的解决方案会好得多。谢谢! –

0

我不能重复您的代码的问题,但我现在有类似的问题。

我有一个覆盖按钮,在图像的左侧位置上运行动画,仅用于测试.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

以下网址中有不运行.animate一个touchend事件功能:

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

+0

这几乎是同样的问题。也许这个脚本臭虫566也适合你?否则:如果可能,我添加了一个使用CSS3转换的jQuery插件,而不是animate()。他们工作。 –

0

我刚找到解决办法。这是一个黑客imho,但它为我工作。在touchend事件函数中,执行一个调用另一个执行动画的函数的setTimeout。
$(“div”)。bind(“touchend”,TouchEnd); (e) timeout = setTimeout(runanimation,10); }

这是足够的延迟,以避免jQuery的动画功能停止在touchend/scroll之后在safari中工作的问题。

+0

我已经尝试了一段时间,它不适合我不幸... –