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 の問題を解決する方法を教えていただければ幸いです。