经常去国外一些css/jQuery教学网站学习，当然也和各种高亮代码打交道。一般来说，正文中插入的代码都是包裹在<pre>或<code>中的。有些源代码高亮区域很宽，所以都会加上滚动条，即css中对pre、code加上overflow:auto或者overflow-x：scroll。某一天发现有家博客上用的代码区域会自动伸缩，鼠标悬停代码区域会自动展开，虽然没啥大用处，看上去很有意思，方便访客查看源码部分：

这个用到了jQuery，效果和代码都放在下面：

 $('pre').hover(function() {$(this).stop().animate({width: 680},800).css({'overflow-x': 'scroll'})},function() {$(this).stop().animate({width: 540},800,).css({'overflow-x': 'scroll'})});

鼠标放在代码区域自动把<pre>宽度增大，移开鼠标恢复。当然设定的时间比较快，上面的代码展开的时间是800ms，如果想像我这里展示的那样缓慢展开，接近目标大小越来越慢的效果，可以用上easing的效果，用了一个“quart”的函数：

jQuery.easing.quart = function (x, t, b, c, d) {
  return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

相应的，第一部分的代码改成：

 $('pre').hover(function() {
        $(this).stop().animate({
            width: 680
        },
        3000,'quart').css({
            'overflow-x': 'scroll'
        })
    },
    function() {
        $(this).stop().animate({
            width: 540
        },
        2000,'quart').css({
            'overflow-x': 'scroll'
        })
    });

这里我设定的时间是3s宽度到680px，看上去还不错。

FIN