基本滑块事件处理

Question

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

它的作用：

它从右向左滑动
当鼠标进入时，间隔被清除，动画停止
当鼠标离开时间隔重新开始

但问题来了：

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

我认为在 mouseenter 和 leave 上听到事件处理不是最好的主意。考虑过处理这些事情的按钮，但这里可能是其他完全错误/愚蠢的事情。 :)

看这里：here：

Answer 1

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

<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>

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

基本滑块事件处理

Basic slider event handling

javascript

jquery

slider