Прокручивайте изображения при наведении и остановитесь на последнем увиденном изображении

Question

У меня есть 5 изображений, которые я чередую при наведении курсора.

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');
    });

});

Теперь мне нравится достигать того, что при наведении мыши снова должен быть виден не черный фон, а последнее изображение, которое было видно при наведении.

Answer 1

Тривиально, вы можете просто удалить removeClass функция.

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
  });

});

Но черный фон вызван вашим собственным CSS:

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

Так нужно ли вообще иметь visibility:hidden если вы хотите удалить его в конечном итоге?