Jquery-based code display area auto-stretching effect _ jquery

Today, I saw a technical website. In the code display area, the border will be stretched, making it easy for users to read the experience. I checked the code in a very simple way and used jquery, if it is not applicable, the following jquery implementation code can be implemented:

The Code is as follows:

$ (Document). ready (function (){

$ ('Pre'). hover (
Function (){
If ($ (this). width () = 520 ){
$ (This). animate ({width: '000000'}, 800 );
Certificate (this).css ({border: '1px solid #2B99E6 '});
}
},
Function (){
If ($ (this). width () = 800 ){
$ (This). animate ({width: '000000'}, 520 );
Certificate (this).css ({border: '1px solid #555555 '});
}
}
);