Question

请考虑这段js代码：

function scroll(){
    $('.container').css('marginLeft', '-50%');
    $('.container').animate({'marginLeft': 0}, 300);
}

示例：http://jsfiddle.net/aSXBL/3/

Safari中有一种奇怪的行为 - 动画从“从右到左”而不是“从左到右”发生。经过一些分析后，我发现jQuery在这种情况下以正边距值开始动画。

你认为它应该被视为一个bug还是它只是Safari的特定“功能”？在这种情况下，解决方法可能会有什么帮助？

感谢。

Answer 1

显然这是一个错误 - 百分比返回意外结果（实际上不仅与动画功能有关）。参见：

console.log($('.container').css('marginLeft'));
// 10px as expected
$('.container').css('marginLeft', '-50%');
// object visually moved as expected
console.log($('.container').css('marginLeft'));
// this outputs 300px in Safari

Answer 2

我有同样的问题。修复使用CSS Transitions用于现代浏览器，jQuery为其余浏览器设置动画。我用modernizr来决定哪个服务。这使Safari 5使用CSS，从而避免了这个问题。

if( !Modernizr.csstransitions ){
  $('#gallery .slides').animate({"margin-left":'-200%'}, 750);
} else {
  $('#gallery .slides').css({"margin-left":'-200%'});
}
            }

计算负百分比边际时safari中可能存在的错误

2 个答案: