The scrollbar of <pre> will disappear during the animating? any ideas to solve this?

Question

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?

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

Answer 1

change your css properties to

pre {
  overflow:scroll !important;
}

as done in this example http://jsfiddle.net/vTBV4/

however, the !important flag may not work in all browsers :( but as far as i know, this is the only way to ensure that the scroll is visible, as jquery animate implicitly sets the inline style overflow: hidden on the element to be animated.

Another option might be to create and animate a parent container instead of the <pre>.