边框在jquery动画期间消失

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;
}