javascript - jQuery position().left 在动画 marginLeft '-=300px' 之后总是 === 0

Question

这让我发疯了!我想使用 - 边距为“左”元素设置动画。但是，一旦显示所有子元素，我也想在相反的方向上为相同的元素设置动画。我的脚本不那么简单但相似:

timer = setInterval(function(){
    var direction = ($('ul','.column').css('margin-left') <= 0)? '-=': '+=';
    $('ul','.column').animate({marginLeft:direction+($('li','.column').width())+'px'},500);
},1000);

我也试过$('ul,'.column').position().left <=0而不是上面的条件。我的问题是 margin-left和 position().left永远不要返回负变量:S。如果变量“应该”为负，则它始终返回为 0。我可以轻松计算出我希望动画朝相反方向移动的位置，但如果条件不是负数，这将无法正常工作。

我非常希望能对为什么 margin-left 有一些了解和 position().left总是返回 0 而不是 -1000 或其他。但是，如果您有其他解决方案，我仍然会很高兴 :)

Answer 1

jQuery 的 CSS margin-left 将返回一个类似这样的字符串:20px 你需要使用

去掉 'px'

parseInt( $('ul','.column').css('margin-left') , 10 )

所以应该是:

timer = setInterval(function(){
    var margLeft = parseInt( $('ul','.column').css('margin-left') , 10);
    var direction =  margLeft<=0 ? '-=': '+=';
    $('ul','.column').animate({ marginLeft: direction+($('li','.column').width()) },500);
},1000);

而且，如果我没记错的话，Chrome 有一个问题，那就是为那些没有在 CSS 中指定应用动画的属性的元素设置动画，这意味着:确保在样式表中为您计划的元素的 margin-left 设置一个值动画。