0

によって引き伸ばされた大きな画像の背景を持つウェブサイトを仕上げていbackground-size:coverます。こちらをご覧ください：http: //knihaoplanu.g6.cz

ご覧のとおり、縦方向のアニメーションはそれほどスムーズではありません。すべての JPEG 画像のサイズは 500KB を超えず、通常は 1000x500 程度です。

私は非常に基本的なコードを使用します:

function SlideShow() {
    $('#wrapper .scroll').bind('click',function(e){

    // SETUP
    e.preventDefault();
        var $anchor = $(this).attr('href');

        // ANIMATION
        $('#wrapper').stop().animate({
            scrollLeft: $($anchor).position().left
        }, 1000);
    });

アニメーションをよりスムーズにする方法について何かアイデアはありますか? オンラインで同様のトピックをいくつか見つけましたが、明確な回答が得られたものはありませんでした (少なくとも私にとっては)。そのうちの 1 人は、問題は にあると示唆しましたが、それがbackground-size:coverなくても途切れは残りました。

どうもありがとうございました！

編集（解決済み）

CSS アニメーションは間違いなくその方法です。アニメーションは非常にスムーズになりました。締め切りが非常に近いため、サイトを再コーディングしたくありません。そのため、マーカスが親切に提案したように、jQuery Transit プラグインを使用しました。

悲しいことに、私はまだ完全に終わっていません。scrollLeftコマンドを（プラグインのウェブサイトで提案されているように）置き換えるxと、パーセンテージの種類に基づく水平レイアウトが溶けます。:)

scrollLeft を使用し、Transit の機能を保持する方法を教えてもらえますか?

ありがとう！

4

1 に答える 1

1

OK、素晴らしいTransit Pluginが答えでした! アニメーションを 500 秒より遅く実行すると、アニメーションはまだ少し不安定ですが (Firefox と Chrome でテスト済み)、私にとってはそれほど大きな問題ではありません。

x編集について -パラメータを負にするのを忘れていました。:)

マーカスありがとう！

于 2013-06-25T22:00:35.903 に答える