Question

我有一个使用animation()的图片的sldieshow插件，我希望它仅适用于悬停事件，并在mouseout上将图像重置为默认位置
我面临的只有两个问题，就是我无法停止动画，以及浏览器块过多的内存使用
这是我用的：

$('.slideshow').hover(function() {
  $(this).find('li:first').attr('flag', '');
  $(this).slide()
}, function() {
  $(this).find('ul').stop(true); //if you keep the mouse a little bit long it wont stop
  // and this while statement blocks the browser
  while ($('[flag]').index() != 0) {
    $(this).slide(1) // the parameter 1 here is to slide only once
  }
})

为了充分理解这里是我的[DEMO]
所以我上面所说的是我实际期望的，但它得到堆栈而不是为什么会这样注意：我没有使用任何增量，因为幻灯片插件只执行一次，然后在不满足条件时重新执行

Answer 1

您可能需要这样的内容（请填写实际代码）：

function changeSlide(ss) {
    if ($(ss).hasClass('hover') {
        // transition to the next slide
    }
    setTimeout(function() {changeSlide(ss)}, 5000 /*milliseconds*/);
}
$('.slideshow').on('mouseover',function() {
    $(this).addClass('hover');
    changeSlide(this);
}).on('mouseout',function() {
    $(this).removeClass('hover');
});

Modified demo

而声明无限执行

1 个答案: