QQ空间顶部折页撕开效果示例代码

效果：

HTML：
复制代码代码如下:
<div id="pageflip">
<a target="_blank" href="http://www.sparkdesign.cn/"><img width="307" height="319" src="js/page_flip.png" style="overflow: hidden; width: 50px; display: block; height: 52px;"></a>
<div class="msg_block" style="overflow: hidden; width: 50px; display: block; height: 50px;"></div>
</div>

JS：
复制代码代码如下:
$（document）.ready（function（）{

$（"#pageflip"）.hover（function（）{
$（"#pageflip img , .msg_block"）.stop（）.animate（{width: "307px", height: "319px"}, 500）;
},function（）{
$（"#pageflip img"）.stop（）.animate（{width: "50px", height: "52px"}, 220）;
$（".msg_block"）.stop（）.animate（{width: "50px", height: "50px"}, 200）;
}）;

}）;