2

jQueryでアニメーション化しているラッパー内に3つの絶対配置コンテナーがあります。

私のアニメーション機能:

function slideContainer(container, easing, offset){
    direction = (container.hasClass('out')) ? '+' : '-';
    //margin = (container.hasClass('out')) ? 0 : -offset;
    container.stop().animate({
        left: direction+"="+offset
        //'margin-left' : margin
    }, 650, easing, function() {
        $(this).toggleClass('out');
    });
};

私はLinuxボックスを使用しています。Chrome では、すべてが期待どおりに機能しています。しかし、Firefox 25 では、コンテナーの左の位置がランダムに異なる値に設定されます。これを最新の Firefox/Windows でテストしました。同じ問題があります。

このフィドルでのすべての動作: http://jsfiddle.net/gebeer/F2DZH/ ナビゲーション項目をクリックして左にスライドし、赤いサブナビ コンテナーをクリックしてスライドして戻します。

position left の代わりに margin-left をアニメーション化すると、両方のブラウザで正常に動作します。

誰でもこれを確認したり、コードのバグを指摘したりできますか? ありがとうございました。

更新: もう少しいじった後、FF の問題は、使用していたイージング関数に関連しているように思われることがわかりました。もともと、jquery.easing.1.3 プラグインのeaseInBackを使用していました。標準のスイング機能を使用すると、奇妙な動作が停止します。

これを再現するには、フィドルで var easing を変更するだけです。

それでも私はeaseInBackを使いたいです。FF の問題を解決する方法を教えていただければ幸いです。

4

0 に答える 0