jquery - jquery animate中に境界線が消える

Question

jquery を使用してスライド パネル効果を作成しました。すべてが機能しますが、パネルが右にスライドすると、アニメーション中に右端のパネルの右端が失われます。私は理由を理解することができませんでした。なぜこれが起こっているのかについての洞察は大歓迎です。ありがとう。

コード：

<div id="content">
        <div class="panel" onclick="$(this).nextAll('.panel:not(.slid)').animate({left:'-=400px'},{ duration: 1000, queue: false }).addClass('slid');
                        $(this).prevAll('.panel').andSelf().filter('.slid').animate({left:'+=400px'},{ duration: 1000, queue: false }).removeClass('slid');"class="display" style="left:300px;"></div>
        <div class="panel" onclick="$(this).nextAll('.panel:not(.slid)').animate({left:'-=400px'},{ duration: 1000, queue: false }).addClass('slid');
                        $(this).prevAll('.panel').andSelf().filter('.slid').animate({left:'+=400px'},{ duration: 1000, queue: false }).removeClass('slid');" class="display" style="background-color: red; left:200px;"></div>
        <div class="panel" onclick="$(this).nextAll('.panel:not(.slid)').animate({left:'-=400px'},{ duration: 1000, queue: false }).addClass('slid');
                        $(this).prevAll('.panel').andSelf().filter('.slid').animate({left:'+=400px'},{ duration: 1000, queue: false }).removeClass('slid');"class="display" style="left:100px;"></div>
        <div class="panel" onclick="$(this).nextAll('.panel:not(.slid)').animate({left:'-=400px'},{ duration: 1000, queue: false }).addClass('slid');
                        $(this).prevAll('.panel').andSelf().filter('.slid').animate({left:'+=400px'},{ duration: 1000, queue: false }).removeClass('slid');"class="display" style="left:0px;"></div>
    </div>

そしてCSS：

#content {
    position: relative;
    top: 40px;
    left:175px;
    height: 300px;
    width: 800px;
    border: 4px groove #191970;
    overflow: hidden;
}

#content .panel{
    position: absolute;
    float: left;
    height: 300px;
    width: 500px;
    border: 4px groove #191970;
    background-color: white;
    margin: -4px;
}