当前位置:  开发笔记 > 前端 > 正文

跨浏览器的jQuery过渡动画?

如何解决《跨浏览器的jQuery过渡动画?》经验,为你挑选了1个好方法。

是否有任何jQuery 1.3动画过渡在Firefox 3和IE7中都有效?

我有一个包含多个表行(25或更多)的表,其中一些行开始隐藏(这些行都共享一个公共类;在本例中,它是".hidden").在表头中是一个"显示更多"链接,它通过.click()绑定到一个显示隐藏行的函数,然后将"显示更多"更改为"显示更少"并将.click()更改为相反的功能.

在每个.click()函数中,都有一行代码

$(this).parents("tbody").children("tr.hidden").show();

用.show()替换为.hide()替换"Show less"函数.

但是,如果我尝试用.fadeIn()/ .fadeOut()替换.show()/.hide(),IE会将它呈现为与.show()/.hide()几乎完全相同,除非它需要一分钟.hide()生效.那里没有真正的动画.IE中的劣势,虽然它的Firefox很棒.

如果我尝试使用.slideDown()/ .slideUp(),它在IE中同样是janky,几乎与.show()/.hide()完全相同,只是在完成转换后有一个奇怪的脉冲效果.Firefox 3也扼杀了它,显然只是忘记了所显示的表行的行宽并使整个事情看起来很糟糕.

那么动画只是在IE7中吮吸?在这种情况下,有没有办法在两种浏览器中都能实现优雅平滑的过渡?



1> Jeremy Ricke..:

对于IE来说,经常有多个并发动画可能很难.Javascript引擎不在Safari或Firefox或Chrome附近.这适用于IE6和IE7.我还没有使用过IE8.

有一点可以帮助一点,就是在你试图制作动画的元素上设置静态高度.从CSS /布局的角度来看,这通常并不理想,但是......这允许jQuery跳过在动画元素高度之前必须先计算每个元素的高度的任务.

通常,您可能会像单反相机那样接近动画.(在这里坚持我).如果您正在尝试快速拍摄体育赛事,任何摄影师都会建议您提前设置焦距,ISO和快门速度.通过这种方式,相机无需在每次拍摄之间计算所有这些内容,您只需按住快门按钮并单击 - 单击 - 单击即可.A-Team风格.

无论如何,当谈到动画时,请尝试考虑javascript需要计算的动画才能发生.不透明度,高度,计算高度(元素宽度+边框+填充),屏幕位置都是很好的起点.

通常情况下,您可以实际看到jQuery在动画开始时添加到DOM中(使用Firebug).就像在不透明度动画上一样,你可以看到style ="opacity:1;" 在倒计时到0开始之前添加.

推荐阅读
手机用户2502852037
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有