jquery - jQuery Transition は Chrome でのみ動作します

Question

まず第一に、私は jQuery をまったく初めて使用します (私はむしろデスクトップ アプリの開発者です)。

3 DIV 間の「スライド」トランジション効果で構成される最初の jQuery コードを作成しようとしています。

FFやIEではなく、Chromeでのみ機能する理由がわかりません。一人目も二人目も動きたくないし隠れたくない。

これに関するヘルプは大歓迎です。事前に感謝します!

ここに私の現在のコードがあります:

jQuery :

$(function () {

    var contentWidth = '-' + ($('.content').width() + 1000) + 'px';

    $('.content').css({
        position: 'absolute',
        left: contentWidth
    });    

    $('#ligne1')
        .animate({ left: 100 },"fast")
        .addClass('visible');

    $("a.temp").click(function () {
        event.preventDefault();
        var $blockID = $( $(this).attr('href') );
        if ($blockID.hasClass('visible')) { return; }
        $('.content.visible')
            .removeClass('visible')
            .animate( { left: $(window).width() }, function () {
                $(this).css('left', contentWidth);
            });
        $blockID
            .addClass('visible')
            .animate({ left: 100 }, 1000);
    });
});

ここに私のCSSがあります:

.wrapper { position: relative;}
.content { width: 900px; height: 300px; padding: 0; left: 0; top: 0; }
.box { width: 900px; height: 300px; }
#ligne1 .box { background: green; }
#ligne2 .box { background: yellow; }
#ligne3 .box { background: red; }

そして最後に、ここに私の HTML があります:

<a class="temp" href="#ligne1">One</a>
<a class="temp" href="#ligne2">Two</a>
<a class="temp" href="#ligne3">Three</a>
<div class="wrapper" style="style="position: absolute; left: 50%; ">
    <div id="ligne1" class="content">
        <div class="box"></div>
    </div>
    <div id="ligne2" class="content">
        <div class="box"></div>
    </div>
    <div id="ligne3" class="content">
        <div class="box"></div>
    </div>
</div>