jquery - 平滑 jQuery 幻灯片

Question

我有一个简单的图像 slider ，它在悬停时循环显示多个图像。问题是它非常不稳定。原因是这是一个静态图像，在悬停状态之前可见并在悬停状态下隐藏。这使得图像周期起伏不定。我只是在寻找一种方法来平滑循环。

或者我只需要找到一种方法让静态图像在悬停时消失并在鼠标离开 div/图像时重新出现。

我在下面有一个演示

JS Fiddle Demo

jQuery 代码

jQuery(function($){

// Cycle plugin
$('.slides').cycle({
    fx:     'none',
    speed:   1000,
    timeout: 70
}).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');
});

});

静态图像在 css 的第 20 行

Answer 1

按照你说的做，悬停时隐藏图像，然后再次显示图像似乎解决了问题。

jQuery(function($){

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

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

});

http://jsfiddle.net/WCTX8/2/