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