Question

我正坐在一个基本的jQuery Slider上，了解一下jquery中的插件开发。

它的作用：

从右向左滑动
当鼠标进入时间间隔被清除并且动画停止
鼠标离开时间间隔重启

但问题出在这里：

当我不断进入和离开滑块时，幻灯片的动画功能会中断。加载动画按预期继续。

我认为事件处理在mouseenter和leave上听到的并不是最好的主意。想到处理这个东西的按钮，但也许是其他完全错误/愚蠢的东西。 :)

看看这里：here：

Answer 1

您可以尝试使用标记来控制动画的Stop and Go，而不是清除间隔。使用ClearInterval来停止动画并通过创建新的Interval来恢复它并不能控制它。像下面这样的东西可能对你的情况有用，并帮助你在不同的方向。：

＆＃13;

<div id='mySlider' style='width:200px;height:40px;background-color:blue;'></div>
<script>
  var mySlider = document.getElementById('mySlider');
  var isOver = true;

  mySlider.addEventListener('mouseenter' , function(){
    isOver = false;
  });
  
  mySlider.addEventListener('mouseout' , function(){
    isOver = true;
  });

  var myID = setInterval(function(){
    if(isOver === false)
      mySlider.style.width = parseInt(mySlider.style.width) + 1 + "px";
  },10);

</script>

＆＃13;

Answer 2

您忘记清除超时并在init()（开始）之前停止滑块

我更新了您的fiddle

<强>的变化：

var interval, timeout;

function stopSlider()   {
    console.log("function: stopSlider");        
    clearTimeout(timeout);
    clearInterval(interval);        
}

$('.slides').on('mouseenter', function()    {
    stopSlider();
}).on('mouseleave', function()  {
    stopSlider();
    timeout = setTimeout(init, pause);
});

function startSlider()   {
    // just a tip
    // $('.loading').animate({"width": "0"}, 0); // makes no sense, use instead .css()
    $('.loading').css('width', '0'); 
    ...
}

基本滑块事件处理

2 个答案: