CODEWITHSUNDEEP
jqueryhtmlcss
flightrecorder
flightrecorder

Reputation: 11

Jquery cycle plugin - Hover/Mouseout Slideshow

I have a transparent png in a jquery cycle slideshow. On rollover, it fades from Image A to B. On mouseout, it goes back to A. However, it will not repeat this fade on any rollovers afterwards. Any ideas for this? Thanks 

    <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>

Upvotes: 1

Views: 428

Answers (1)

Mooseman
Mooseman

Reputation: 18891

Use this instead:

$("#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);
');

Upvotes: 1

Related Questions