弹出层效果的问题

Question

$(document).ready( function() {
    $("#xf1").mouseover( function() {
        $("#xu001").fadeTo("slow", 1);
    }).mouseout( function() { $("#xu001").fadeTo("slow",0); 
 });
    $("#xf2").mouseover( function() {
        $("#xu002").fadeTo("slow", 1);
    }).mouseout( function() { $("#xu002").fadeTo("slow",0); });
});  <div style="width:125px; height:150px;" id="xf1"><a href="xiangqing.html"><img  src="image/1/1.png" style="border:0px" /></a></div>
 <div style="width:125px; height:20px; font-weight:bold; color:#F89807; text-align:center;
 line-height:20px;"><a href="xiangqing.html">WT150</a></div>
 </div>
 <div style="width:225px; height:170px; float:left;"></div>
 <div style="width:228px; height:250px; position:absolute; left: 504px; top: 220px;" id="xu001"><img src=image/2/1.jpg /></div>
 
 
 <div style="width:125px; height:170px; float:left;">
   <div style="width:125px; height:150px;" id="xf2"><a href="xiangqing.html"><img  src="image/1/2.png" style="border:0px" /></a></div>
    <div style="width:228px; height:250px; position:absolute; left: 723px; top: 222px;" id="xu002"><img src=image/2/2.jpg /></div>
为什么我第一次执行 可以弹出图片第二次 就不可以了

Answer 1

参考：
http://trentrichardson.com/Impromptu/index.php