jquery animate 在 chrome 中不起作用答案

【问题标题】：jquery animate is not working in chromejquery animate 在 chrome 中不起作用
【发布时间】：2011-11-19 14:23:51
【问题描述】：

我的 jquery 动画代码在 IE 和 firefox 中运行良好，但在 Chrome 和 safari 中无法运行。有什么建议吗？

这是我的 jquery 动画代码

$('#menu ul li a').click(function (e) {

    /* On a thumbnail click */
    $('li.menuItem').removeClass('act').addClass('inact');
    $(this).parent().addClass('act');

    var pos = $(this).parent().prevAll().length; //.prevAll('.menuItem').length;
    pos = pos - 1;


    $('#slides').animate({ marginLeft: -positions[pos] + 'px' }, 450);
    /* Start the sliding animation */

    e.preventDefault();
    /* Prevent the default action of the link */
});

【问题讨论】：

我在我的代码中使用 animate({"margin-left": "-350px"}) 而不是 marginLeft
marginLeft 在 IE 和 firefox 中运行良好。
margin-left 在 Firefox 中不起作用。没有检查其他浏览器。

标签： javascript jquery firefox google-chrome safari

【解决方案1】：

如果我没记错的话，在动画或应用 css 以便于操作时，jQuery 在没有 'px' 的情况下也能很好地计算，而且它更合乎逻辑，因为动画是用数字而不是字符串计算的。那么这不是css属性的问题吗？您是否尝试为您正在制作动画的元素设置至少一个 'position':'relative' 或 'display':'block' 或 'display':'inline-block' 。因为 css 需要这种类型的显示来应用边距属性。例如，尝试动画“left”而不是“margin-left”，如果它有效，它来自应用边距所需的 css 属性。

【讨论】：

因为浏览器的 css 合规性非常不同......更多取决于它们的不同版本......并且它们都在 dom 元素上具有不同的默认 css 属性。用 left 试试，告诉我们大约需要 2 秒。
我已经尝试了你提到的一切，但滑块在 chrome 和 safari 上不起作用。
好吧...所以您尝试为“左”属性设置动画，并假设元素具有“位置”：“相对”属性？对不起，我从来没有遇到过 chrome 的这个问题，也许你可以尝试做一个非常简单的测试，将所有其他代码分开，只使用你想要动画的元素和动画。并精确地确定您正在测试的浏览器和操作系统的版本，所以也许有人知道这方面的一个问题。
好的，我想我应该注释我所有的代码并一一取消注释。我正在使用 Windows 7。
我的意思是你工作中的其他一些东西可能会造成干扰。因此，不要每行注释行，而是尝试构建另一个简单的 html，其中只包含您希望动画的最简单的元素、jQuery lib 和您的动画代码，这样更容易调试并查看它是否工作得更好，那么您知道控制台吗.log 使用 Chrome 吗？

【解决方案2】：

使用left 代替marginLeft。

【讨论】：