Jquery <；预处理>；会在动画制作过程中消失吗？有什么办法解决这个问题吗？

在设置pre标记的动画期间，pre的滚动条将消失，但在动画结束后显示。如何使其在整个动画中显示

<script type="text/javascript">
$(document).ready(function(){   
        $('pre').hover(
                function(){
                    if($(this).width()==520){
                        $(this).animate({width:'800'},400);
                        $(this).css({border:'2px solid #2B99E6'});
                    }
                },
                function(){
                    if($(this).width()==800){
                        $(this).animate({width:'520'},400);
                        $(this).css({border:'2px solid #555555'});
                    }
                }
        );      
});
</script>

<style type="text/css">
pre {
    background: url("images/source.jpg") no-repeat scroll 0 0 #333333;
    border: 2px solid #555555;
    color: green;
    font-family: arial;
    margin: 0;
    overflow: scroll;
    padding: 30px 0 20px;
    position: relative;
    width: 520px;
    display: block;
}
</style>

<pre>
test it: www.gbin1.com
</pre>

$（文档）.ready（函数（）{
$（'pre'）。悬停(
函数（）{
if（$（this）.width（）==520）{
$（this.animate（{width:'800'}，400）；
$（this.css（{border:'2px solid#2B99E6'}）；
}
},
函数（）{
if（$（this）.width（）==800）{
$（this.animate（{width:'520'}，400）；
$（this.css（{border:'2px solid#555555'}）；
}
}
);      
});
前{
背景：url（“images/source.jpg”）无重复滚动0#333333；
边框：2个实心#5555；
颜色：绿色；
字体系列：arial；
保证金：0；
溢出：滚动；
填充：30px 0 20px；
位置：相对位置；
宽度：520px；
显示：块；
}
测试它：www.gbin1.com

将css属性更改为

如本例所示

然而，

！重要提示

标志可能不适用于所有浏览器：（但据我所知，这是确保滚动可见的唯一方法，因为jquery animate隐式地在要设置动画的元素上设置内联样式

溢出：隐藏

）

---

另一种选择可能是创建父容器并设置其动画，而不是

。如果不进行一些认真的编码，就无法在不断变化的宽度/高度上放置滚动条……为什么有人会在它设置动画时滚动？

pre {
  overflow:scroll !important;
}