jquery animate is not working in chrome

Question

my jquery animation code is working fine in IE and firefox, but it doesnt work in Chrome and safari. any suggestions?

this is my animation code for 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 */
});

Answer 1

if I remember well jQuery computes well without 'px' when animating or applying css for easier manipulation, and it is more logical because animating is calculation with numbers, not strings. Then isn't it a problem of css property ? Have you tried to set at least a 'position':'relative' or 'display':'block' or 'display':'inline-block' to the element you are animating. Because css needs that type of display for applying margin properties. Try animate 'left' instead of 'margin-left' for example, if it works, it comes from a needed css property for applying margin.

Answer 2

Use left instead of marginLeft.