爱站程序员基地效果如下：鼠标经过相应图片会展开大图 小图淡出 大图淡入效果
首先 四张小图实现 四张大图隐藏（不同的class）
随着hover事件 小图淡出fadeout 大图淡入fadein
animate保证淡入淡出的过程this指向的图片的长度不变
最后 需在效果前加上stop（）取消效果的排队
代码：
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><script src=\"Jq.js\"></script><script>$(document).ready(function(){// $(\'a\').find(\'img\').hide();$(\'li\').hover(function(){$(this).find(\'.s1\').animate({width:80}).stop().fadeOut(10,function(){$(this).siblings(\'.big\').stop().fadeIn(10);});$(this).siblings(\'li\').find(\'.big\').animate({width:160}).stop().fadeOut(10,function(){$(this).siblings(\'.s1\').stop().fadeIn(10);});});});</script><style>*{padding: 0;margin: 0;}li{display: inline;list-style: none;margin: 0;width: 100%;height:100%;}.s1{width:80px;height:80px;}.big{width:160px;height:80px;display: none;}</style></head><body><div><ul><li ><a href=\"#\"><img src=\"img/1.png\" alt=\"李白\" class=\'s1\' /><img src=\"img/d3.png\" alt=\"李白大图\" class=\'big\'/></a></li><li ><a href=\"#\"><img src=\"img/2.png\" alt=\"诸葛亮\" class=\'s1\'/><img src=\"img/d1.png\" alt=\"诸葛大图\" class=\'big\'/></a></li><li ><a href=\"#\"><img src=\"img/3.png\" alt=\"KPL\" class=\'s1\'/><img src=\"img/d4.png\" alt=\"KPL大图\" class=\'big\'/></a></li><li ><a href=\"#\"><img src=\"img/4.png\" alt=\"不认得\" class=\'s1\'/><img src=\"img/d2.png\" alt=\"不认得大图\" class=\'big\'/></a></li></ul></div></body></html>
