更流畅的Jquery动画 [英] Smoother Jquery Animation

问题描述

对此有另一个线索，但它没有得到解决，可能是因为我不太清楚我的问题。

只想再试一次，希望我关闭在解决这个问题：

我最近的任务是创建一个单页面网站，模拟基本的Flash动画，即滑入和滑出元素。

当我进行互动模拟时，遇到了一个大问题 - 动荡不安的问题。问题出现在屏幕高于18的Mac上，无论18岁以下的浏览器和Mac仅限于FF版本3及以下版本。在PC上，动画几乎接近完美。

这里是我的jquery代码，受影响的元素被标记为id＃md1，＃md2和＃md3：

  $（document）.ready（function（）{
 $（'＃md1'）。animate（{top ：-60px}，500）; 
 $（'＃md2'）。animate（{top：60px}，800）; 
 $（'＃md3'）。animate（{ fadeTo（3000,0.8）; 
 $（'＃bg-img-4'）。fadeTo（1200，1，left，60px}，1000）; 
 $（'。home' ）; 
 $（'＃menu'）。fadeTo（4000，1）; 
 $（'＃copyright'）。fadeTo（4000，1）; 
}）; 
  

我使用了各种优化方法，包括将影响div中的图像缓存在索引页面，稍后将用户重定向到实际页面并排队动画，但没有任何工作。

这真的很令人沮丧，因为我似乎用尽了所有可用的方法我似乎无法在Mac电脑上运行良好。

我有一种直觉，认为我正在编写太多动画文件，导致缓慢 - 任何人都可以确认这是否是主要原因，如果有任何其他方式我可以解决这个问题？

非常感谢您的帮助人。非常感谢它=）

解决方案

最好的方法是使用CSS转换/动画。
如果某些浏览器不支持它们，那么这样的浏览器对任何类型的动画都不是很好。

使用本机代码可以更好地优化CSS中的转换和动画，因此理论上可能会表现出更平滑（更高的FPS）行为。

从上面的jquery动画开始：

1. 尝试减少复杂元素上的fadeTo的数量。
   
2. 尝试简化样式 - 使用透明度减少不透明度或 rgba（）的用例数量。 / li>
   

一般而言：您拥有的DOM元素越少越好。

Had another thread regarding this but it wasn't resolved probably because I wasn't very clear in my question.

Just wanna try again in hope that I close in on resolving this:

I was recently tasked to create a single page website that emulates basic Flash animations i.e. sliding in and fading in and out of elements.

When I got an interactive mock up, I ran into a big problem - choppy animations. The problem was present in Macs with screens above 18" regardless of browsers and Macs below 18" specific only to FF version 3 and below. On PCs, the animation is almost close to flawless.

Here are my jquery codes and the affected elements are tagged with the ids #md1, #md2 and #md3:

$(document).ready(function () {
    $('#md1').animate({ top: "-60px" }, 500);
    $('#md2').animate({ top: "60px" }, 800);
    $('#md3').animate({ left: "60px" }, 1000);
    $('.home').fadeTo(3000, 0.8);
    $('#bg-img-4').fadeTo(1200, 1);
    $('#menu').fadeTo(4000, 1);
    $('#copyright').fadeTo(4000, 1);
});

I've resorted to various optimization methods which include caching the images present in the affected divs on an index page and redirecting the user to the actual page later and queuing the animation but nothing worked.

It's really quite frustrating cos I seem to have exhausted all the available methods I know of and I just can't seem to get it working well on Macs.

I have a gut feel that I'm compiling too many animations on document ready and that's causing the sluggishness - can anyone confirm if that is the main reason and if there is any other way I can tackle this problem?

Thank you so much for your help guys. Appreciate it very much =)

解决方案

The best way is to use CSS transitions/animations for that. If some browser does not support them then such a browser is not good on animations of any kind.

Transitions and animations in CSS are better optimizeable by native code so in theory may exhibit significantly smoother (higher FPS) behavior.

As of your jquery animations above:

1. Try to reduce number of fadeTo's on complex elements.
2. Try to simplify styling - reduce number of use cases of opacity or rgba() with transparency.

And in general: the fewer DOM elements you have, the better.

这篇关于更流畅的Jquery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！