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

Posted 2023-05-08

【中文标题】jQuery position().left 在动画 marginLeft \'-=300px\' 后总是 === 0

【英文标题】：jQuery position().left always === 0 after animating marginLeft '-=300px'jQuery position().left 在动画 marginLeft '-=300px' 后总是 === 0

【发布时间】：2012-12-14 10:02:19

【问题描述】：

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

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 或其他什么。但是，如果您有替代解决方案，我仍然会很高兴:)

【问题讨论】：

P.S 如果您使用更新的 jQuery 库，则不再需要“px”。

【参考方案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 设置一个值动画。

【讨论】：

@Beneto 下次不要发疯，早点来。 “不知道并不可耻。可耻的是不问。” :)