jQuery动画在Safari中不起作用的位置

Question

JSFiddle Example

对于这个项目，我试图使用jQuery的animate()方法创建幻灯片效果。它适用于除Safari之外的所有浏览器（IE8 +）（我使用v7.0测试过）。我广泛研究了可能导致此问题的原因，包括本网站上的文章和主题，MDN以及其他内容 - 我的搜索都没有找到解决此特定问题的方法。我尝试过的一些不起作用的解决方案示例包括：将动画元素设置为float:left;没有动画到position值为0（我试过1px，但没有区别）;和其他人。

我真的很难过，不幸的是我和这个项目一起使用jQuery / JS。我不能依赖CSS3动画，因为我必须支持一些旧版浏览器。

请忽略代码中缺少任何优化 - 我从较大的项目中删除了这一点，并且可能在那里留下了一些额外的参数，这些参数对于本演示而言并非100％必要。

最后，我打算在完成这个项目时无限期地使这些幻灯片循环。我怀疑这会影响在Safari中使用它所需的修复，但它可能值得一提，所以我提到它了:)

/ edit / - 很容易让幻灯片无限循环，所以我这样做了：）

HTML：

<div id="banner">
    <div id="holder">
        <div id="lookbook-container">
            <div width="607px" height="300px" id="lookbook-item-1" class="lookbook-item"></div>
        </div>
        <img width="100%" height="100%" id="arrow-left" src="http://images.harmonyremote.com/EasyZapper/Support/FAQ/HarmonyOne/25672_ARROWLEFT.png" />
        <img width="100%" height="100%" id="arrow-right" src="http://images.harmonyremote.com/EasyZapper/Support/FAQ/HarmonyOne/25672_arrowright.png" />
    </div>
</div>

jQuery的：

    var itemCount = 1;
    var newLookbookItem = '';

    function setArrowEventListeners() {
        $('#holder').on('click', '#arrow-left', function (e) {
            lookbookLeftClick();
        });

        $('#holder').on('click', '#arrow-right', function (e) {
            lookbookRightClick();
        });
    }

    function unsetArrowEventListeners() {
        $('#holder').off('click', '#arrow-left');
        $('#holder').off('click', '#arrow-right');
    }

    function lookbookLeftClick() {
        switch (itemCount) {
            case 1:
                break;
            case 2:
                newLookbookItem = '<div width="607px" height="300px" id="lookbook-item-1" class="insertedLeft"></div>';
                $('.lookbook-item').before(newLookbookItem);
                cmn_slideLeft(itemCount);
                itemCount = 1;
                break;
            case 3:
                newLookbookItem = '<div width="607px" height="300px" id="lookbook-item-2" class="insertedLeft"></div>';
                $('.lookbook-item').before(newLookbookItem);
                cmn_slideLeft(itemCount);
                itemCount = 2;
                break;
            case 4:
                newLookbookItem = '<div width="607px" height="300px" id="lookbook-item-3" class="insertedLeft"></div>';
                $('.lookbook-item').before(newLookbookItem);
                cmn_slideLeft(itemCount);
                itemCount = 3;
                break;
        }
    }

    function cmn_slideLeft(itemCount) {
        unsetArrowEventListeners();
        $('.insertedLeft').animate({
            'right': 0
        }, 800);

        $('.insertedLeft').addClass('lookbook-item');

        setTimeout(function (e) {
            $('.insertedLeft').removeClass('insertedLeft');
            $('#lookbook-item-' + itemCount).remove();
            setArrowEventListeners();
        }, 800);
    }

    function lookbookRightClick() {
        switch (itemCount) {
            case 1:
                newLookbookItem = '<div width="607px" height="300px" id="lookbook-item-2" class="insertedRight"></div>';
                $('.lookbook-item').after(newLookbookItem);
                cmn_slideRight(itemCount);
                itemCount = 2;
                break;
            case 2:
                newLookbookItem = '<div width="607px" height="300px" id="lookbook-item-3" class="insertedRight"></div>';
                $('.lookbook-item').after(newLookbookItem);
                cmn_slideRight(itemCount);
                itemCount = 3;
                break;
            case 3:
                newLookbookItem = '<div width="607px" height="300px" id="lookbook-item-4" class="insertedRight"></div>';
                $('.lookbook-item').after(newLookbookItem);
                cmn_slideRight(itemCount);
                itemCount = 4;
                break;
            case 4:
                break;
        }
    }

    function cmn_slideRight(itemCount) {
        unsetArrowEventListeners();
        $('.insertedRight').animate({
            'right': 0
        }, 800);
        $('.insertedRight').addClass('lookbook-item');
        setTimeout(function (e) {
            $('.insertedRight').removeClass('insertedRight');
            $('#lookbook-item-' + itemCount).remove();
            setArrowEventListeners();
        }, 800);
    }

setArrowEventListeners();