jQueryアニメーションが流動的でない

Question

私のページの流動性に問題があり、jqueryが何らかの形で関わっていると思います。

私は次の1ページのサイトを作成しました。私は（GSGD、http://gsgd.co.uk/sandbox/jquery/easing/によって）JSプラグイン

• localscroll
• scrollto（両方アリエルFlesler、http://flesler.blogspot.de/によって）
• 緩和

とのjQueryを使用

http://cgeese.de/tests/Test02/

問題

リンクをクリックすると、バウンスが容易なターゲットdivにページがスクロールされます（easing.jsで提供）。それは技術的にはうまく動作しますが、私の味には十分に滑らかではありません。

イージングでのスタッターの問題は、私がこれらのプラグインの1つを悪用していると思いますが、コードで間違いを見つけられないようです。

質問

WHYアニメーションが吃音され、どのように私はそれを滑らかにすることができますか？

更新 手がかりはありますか？ jQueryを使ったイージングの使い方は少し良くなっているようですが、同じ問題があります。ですから、私はそれがイージングプラグインではないと思っています。彼のようなプラグインはありますか？

Answer 1

クロムにはかなり流動的です。イージングタイプの変更はほとんど変わりません。

あなたのナビゲーションは位置：固定、すべてのナビゲーションキーフレームでページ全体の再描画/再描画を引き起こしています。これをクロームカナリアンまたはこのトリックで視覚化することができます。http://paulirish.com/2011/viewing-chromes-paint-cycle/

スクロールをアニメートすると、再ペイントがトリガーされます。できるだけ多くのCSS3のシャドウとグラデーションを削除してください。ブラウザのアニメーション化はかなり難しいです。

Firefoxにはプラグインがあると思います。

あなたはこの私にそれを設定する位置最適化することができます：ここでは絶対、およびオーバーフロー隠されているのdiv内のコンテンツを置く...（フェイク体のいくつかの種類）

をそれについての優れた記事です：http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

もう1つのことは、スクロールをアニメーション化するのではなく、要素を自己配置し、絶対配置された要素に配置し、この要素をアニメーション化することです。

再描画/リフローに関するいくつかの一般的なガイドライン：https://developers.google.com/speed/articles/reflow