<pre>的滚动条在动画制作过程中会消失吗？有什么办法解决吗？

问题描述

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

    

解决方法

        将您的CSS属性更改为

pre {
  overflow:scroll !important;
}

如本例所示 http://jsfiddle.net/vTBV4/ 但是，

!important

标志可能无法在所有浏览器中使用:(但据我所知，这是确保滚动可见的唯一方法，因为jQuery animate会在要设置动画的元素上隐式设置内联样式

overflow: hidden

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