Blättern Sie durch die Bilder auf dem Hover und stoppen Sie mit zuletzt gesehenen Bild

Question

Ich habe eine Reihe von 5 Bildern, die ich auf Schwebeflug durchlaufe.

http://jsfiddle.net/9kxw7wpg/1/

jQuery(function($){ 

    // Cycle plugin 
    $('.slides').cycle({ 
     fx:  'none', 
     speed: 1, 
     timeout: 500 
    }).cycle('pause'); 

    // Pause & play on hover 
    $('.slideshow-block').hover(function(){ 
     $(this).find('.slides').addClass('active').cycle('resume'); 
    }, function(){ 
     $(this).find('.slides').removeClass('active').cycle('pause'); 
    }); 

}); 

Was jetzt erreichen Ich mag ist, dass auf mouseout nicht der schwarzen Hintergrund wieder sichtbar sein soll, aber das letzte Bild, das auf schweben zu sehen war.

Answer 1

Trivialerweise können Sie einfach die removeClass Funktion entfernen.

jQuery(function($){ 

    // Cycle plugin 
    $('.slides').cycle({ 
    fx:  'none', 
    speed: 1, 
    timeout: 500 
    }).cycle('pause'); 

    // Pause & play on hover 
    $('.slideshow-block').hover(function(){ 
    $(this).find('.slides').addClass('active').cycle('resume'); 
    }, function(){ 
    $(this).find('.slides').cycle('pause'); //altered 
    }); 

}); 

Aber der schwarze Hintergrund wird von Ihrem eigenen CSS verursacht:

.slides{ 
    z-index:0; 
    visibility:hidden; 
} 

So ist es überhaupt notwendig visibility:hidden zu haben, wenn Sie es letztlich entfernen?