The scrollbar of <pre> will disappear during the animating? any ideas to solve this?
<p>It looks during the animating of the pre tag, the scrollbar of pre will disappear, but appears later when animation is over. how can i make it appear in whole animation?</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(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'});
                    }
                }
        );      
});
&lt;/script&gt;

&lt;style type="text/css"&gt;
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;
}
&lt;/style&gt;

&lt;pre&gt;
test it: www.gbin1.com
&lt;/pre&gt;
</code></pre>
