javascript - iPad2 上的慢速 jQuery 动画

标签 javascript jquery ipad animation safari

我目前正在构建针对 iPad 优化的网站。当用户触摸适当的按钮时,我应该显示/隐藏一些文本 block 。文本在 < p> 标签内。我使用 jQuery 来切换文本的可见性:

$("my selector").toggle("fast");

但它真的很不稳定......是否有一些特定于 iOS 的方法来制作动画,也许是另一个框架或其他东西?

我不认为它应该那么慢...

最佳答案

有几个针对 iOS 的动画脚本,但最基本的是您应该使用 CSS 动画,更具体地说是触发 iOS 硬件的 translate3d 属性(用于定位)。

要切换不透明度,您可以使用常规的 -​​webkit-transition 和 toggleClass,f.ex:

p { -webkit-transition: opacity 0.2s linear; opacity:1 }
p.hide { opacity:0 }

然后:

$("my selector").toggleClass('hide');

我在这里为您做了一个简单的演示:http://jsfiddle.net/rQFZd/

您可以检测触摸设备并专门为支持(和偏好)它的设备提供 css 动画。

编辑:动画高度示例:http://jsfiddle.net/rQFZd/1/ .虽然我不确定 iOS 的性能,但我认为它应该比 jQuery 好。

您还可以添加另一个容器,然后使用 translate3d 重新定位元素而不是缩小它,这在 iOS 上肯定会更流畅。示例:http://jsfiddle.net/rQFZd/2/

关于javascript - iPad2 上的慢速 jQuery 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7559810/

相关文章:

javascript - 如何将数据从表单传递到路由器

ios - iPhone plus 和 iPad UIBarMetrics(导航栏的不同横向/纵向图像)

iphone - iOS 4.x 设备覆盖

objective-c - Objective-C - NSManagedObjectContext 和 NSFetchedResultsController 释放处理

javascript - jquery 删除选中的下拉项

javascript - Angular 4 中的 Interactjs 可调整大小功能(ts 文件)

javascript - JSLint 功能报告中的背景颜色是什么意思?

javascript - IE 11 仍然在点击处理程序中没有 .submit() 的情况下提交表单

javascript - 再次触发时计时器速度会加快两倍

javascript - 仅在第一次尝试时检查复选框,javascript/jquery bug?