Slider在Firefox中运行良好，但在Chrome和Safari中运行不正常

Question

我的滑块在Firefox中运行良好，但在Chrome或Safari中无效。我是jQuery的新手。我只使用了一个月。我可以说我的脚本正在创建我的元素，但在那之后我无法分辨它是什么绊倒。

这是我的滑码。

(function($){
    var sliderUL = $("div.slider").css("overflow", "hidden").children("ul"),
        imgs = sliderUL.find('img'),
        imgsWidth = imgs.width(),
        imgsLen = imgs.length,
        current = 1,
        totalImgsWidth = imgsWidth * imgsLen;

        $("<div id='slider-nav'></div>").insertAfter('div.slider');

        $("#slider-nav").prepend("<button data-dir='next'>Next</button>");
        $("#slider-nav").prepend("<button data-dir='prev'>Prev</button>");

    $("#slider-nav").show().find("button").on("click", function(){
        var direction = $(this).data("dir");
        var loc = imgsWidth;

        if(direction === "next"){
            current = ++current;
        }else if (direction === "prev"){
            current = --current;
        }

        if(current === 0){
            current = imgsLen;
            loc = totalImgsWidth - imgsWidth;
            direction = "next";
        }else if(current -1 === imgsLen){
            current = 1;
            loc = 0;
        }
        transition(sliderUL, loc, direction);
    });

    function transition( container, loc, direction){
        var unit;
        if(direction && loc !== 0){
            unit = (direction === "next") ? "-=" : "+="
        }
        container.animate({
            "margin-left" : unit ? (unit + loc) : loc
        })
    };
})(jQuery);