<script type="text/javascript">
    $(document).ready(function(){
          $('#picroll').cycle({
                timeout:.2,
                delay:  0,
        fx: 'fade',
        continuous: false,
                speed:  300,
                autostop: 1
         }).cycle("pause").hover(function() {
                $(this).cycle('resume');
         },function(){
                $(this).cycle('pause');
         $(this).cycle('resume');
   })
     .mouseleave(function(){
        $(this).cycle(0, 'fade').cycle('play');
      });
    });
</script>

  <div id="picroll"><a href="#"><img src="images/group/PictureA.png" width="114" height="330"/>
  <img src="images/group/PictureB.png" width="114" height="330" /></div>

$("#picroll").mouseover('
     $("#picroll:nth-child(1)").fadeOut(500);
     $("#picroll:nth-child(2)").fadeIn(500);
');
$("#picroll").mouseout('
     $("#picroll:nth-child(1)").fadeIn(500);
     $("#picroll:nth-child(2)").fadeOut(500);
');