<h2>两张图变换 无过度效果</h2>
<img class="circle" src="images/1-1.jpg" border="0" onm ouseover="this.src=http://www.mamicode.com/‘images/1-2.jpg‘" onm ouseout="this.src=http://www.mamicode.com/‘images/1-1.jpg‘"/>

<div class="inner">
    <div style="background-image: url(‘images/ginoble2.png‘);"><img src="images/ginoble.png"/></div>
</div>

$(‘.inner‘).hover(function () {
$(this).find("img").stop().animate({
       opacity: 0
    }, ‘200‘);
   } ,function () {
    $(this).find("img").stop().animate({
       opacity: 1
    }, ‘200‘);
   }
);

<h2>两张图变换position换 有时间过度</h2>
<div id="pic">
<div class="bloc"></div>
<div class="hid"></div>
</div>

#pic{ width:230px; height:230px; position:relative; display:block; 
overflow:hidden;
border-radius:50%; }
.bloc{ position:absolute; left:0px; top:0px; display:block; background:url(images/2-1.jpg);
width:230px; height:230px;border-radius:50%; z-index:2; }
.hid{  position:absolute; left:-230px; top:230px; display:block; background:url(images/2-2.jpg);
width:230px; height:230px; border-radius:50%; z-index:3;}

$("#pic").hover(
 function(){
   $(this).find(‘.hid‘).animate({left:‘0px‘,top:‘0px‘,opacity:1},150)
 } ,
  function(){
   $(this).find(‘.hid‘).animate({left:‘-230px‘,top:‘230px‘,opacity:0},150)
  }
)