1

jQueryを使用してCSSプロパティを介していくつかのオブジェクトをアニメーション化する2つのサイトに取り組んでいます。Firefox ではすべてがうまく機能しますが、アニメーションが開始する前にオブジェクトが消えて画面外に再表示される Webkit のバグがいくつかありました。

http://coreytegeler.com/gl/ (テキスト ボックスをクリック)

$('#front-nav-wrapper').css({'position' : 'fixed','top': '55px', 'opacity' : '1' });

http://coreytegeler.com/justin/ (いずれかのボックスをクリック)

$("#nav ul li").click(function() {
    $("#nav ul li#a").animate({'margin-top' : '-300px' , 'margin-left' : '0px', 'left' : '10px'}, 500, 'swing');
    $("#nav ul li#b").animate({'margin-top' : '-200px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
    $("#nav ul li#c").animate({'margin-top' : '-100px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
    $("#nav ul li#d").animate({'left' : '10px'} , 500, 'swing');
    $("#nav").animate({'margin-top' : '100px'} , 500, 'swing');
});

これは既知のエラーであり、簡単に修正できるはずですが、まだ修正が見つからないようです:(

4

1 に答える 1

1

私が理解できることから、問題は、webkit がleftプロパティを最初は「自動」値からピクセル オフセットにアニメーション化できないことのようです。プロパティを 0 に設定し、そこからアニメーション化します。

li私が提案できる 1 つの解決策は、アニメーションを開始する直前に各要素の現在のピクセル オフセットを計算し、それらのleftプロパティをそれらのオフセットに設定することです。

このようなもの：

$("#nav ul li").each(function(){
    $(this).css('left', $(this).position().left + 'px');
});

jsFiddle の例

これは、2 番目の例のリンクに基づいています。

于 2013-07-06T19:07:26.040 に答える