Question

在预标签的动画期间，预览的滚动条将消失，但在动画结束后会显示。如何让它出现在整个动画中？

<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

将您的css属性更改为

pre {
  overflow:scroll !important;
}

在此示例中完成 http://jsfiddle.net/vTBV4/

然而，!important标志可能不适用于所有浏览器:(但据我所知，这是确保滚动可见的唯一方法，因为jquery animate隐式设置内联样式{{ 1}}在要动画的元素上。

另一种选择可能是创建父容器而不是overflow: hidden。

<pre> will disappear during the animating? any ideas to solve this?</pre>的滚动条

1 个答案: