0

我使用 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;
}
4

0 回答 0