jQuery图片切换效果

     这几天刚开始学习jQuery，感觉jQuery确实很强大，下了个CHM的手册，看他的筛选器，属性还有各种方法
感觉不难，几天不碰忘记了，看来还是缺乏练习，还没有真正会用，只是理解怎么回事吧了，所以决定坚持天天练习
自己动手写，
    这个是个简单的图片切换，当然只用js也能很好的实现，但是感觉没有jQuery来的快速直接，尤其是他的选择器很方便，
不用在js里面做循环了呵呵，我做的初衷是实现缩略图单击后图片淡入淡出，但是尝试了很多次没有解决，也不知道问题出在哪里
如果有谁知道，请在评论里面给我指教一下，不胜感激。
效果图入下

代码实现部分

 1$(document).ready(function(){//这里最好不要用$()取代
 2  $(".thumil_img img").hover(
 3     function(){$(this).animate({marginRight:"20"}),"slow"},
 4     function(){$(this).animate({marginRight:"0"}),"slow"}
 5                        )
 6  $(".thumil_img li a").click(function(){
 7    var img_path=$(this).attr("href");
 8    var title=$(this).attr("title");
 9    $("#largeImages").attr({src:img_path}) ;
10    $("#largeImages").fadeIn("slow")
11    $(".title").html(title);
12    return false;//一定要有return false，否则会跳转链接到图片         
13})
14});
15

 1a {}{
 2  blr:expression(this.onFocus=this.blur())
 3}/**//*去除a标点击后的签的虚线,在FF浏览器下不起作用，只好又在a标签里面写入了*/
 4* {}{
 5    margin:0;
 6    padding:0;
 7}
 8#reimg {}{
 9    margin:0 auto;
10    width:410px;
11    margin-top:200px;
12}
13#largeImages {}{
14    height:250px;
15    width:400px;
16    display:block;
17    margin-bottom:5px;
18    padding:5px;
19    border:1px #ccc solid;
20}
21.thumil_img {}{
22    list-style:none;
23    height:20px;
24    margin-bottom:5px;
25    width:200px;
26    display:inline;
27}
28.thumil_img li {}{
29    float:left;
30    margin-right:5px;
31}
32.thumil_img img {}{
33    height:20px;
34    padding:2px;
35    border:1px solid #ccc;
36}
37.title {}{
38    float:right;
39    margin-right:10px;
40    display:block;
41}
42.title p:first-letter {}{
43    text-transform:uppercase;
44}

 <div id="reimg"> <img  id="largeImages" src="images/1.jpg" />
2   <ul class="thumil_img">
3     <li><a href="images/1.jpg" title="Apple" onFocus="this.blur()"><img src="images/1.jpg" /></a></li>
4     <li><a href="images/2.jpg" title="Cool" onFocus="this.blur()"><img src="images/2.jpg" /></a></li>
5     <li><a href="images/3.jpg" title="Diamond" onFocus="this.blur()"><img src="images/3.jpg" /></a></li>
6     <li><a href="images/4.jpg" title="Color" onFocus="this.blur()"><img src="images/4.jpg" /></a></li>
7   </ul>
8   <span class="title">Apple</span> 
9  </div>