在鼠标悬停时暂停简单的推子脚本

Pause simple fader script on mouse-hover

本文关键字：脚本 简单 暂停 鼠标 悬停      更新时间：2023-09-26

当鼠标悬停在此脚本的淡化链接div 上时，我想暂停

悬停： 
  $(function(){
  $('.fadelinks > :gt(0)').hide();
  setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo
('.fadelinks');}, 5000);
});

html 大致如下：

<div class="fadelinks">
    <div>...</div>
    <div>...</div>
</div>

我已经尝试了一些与interval有关的事情，以尝试在其中塞入悬停功能，但是由于我极其有限的jquery知识，我尝试过的所有内容都会破坏脚本，使其卡在最后一张幻灯片或第一张幻灯片上。只是希望这个简单的脚本在鼠标悬停时暂停并在鼠标退出时重新启动。

下面是脚本在其自然状态下的 JSFiddle。

尝试使用

.hover() ，声明变量以引用setInterval，使用函数调用setInterval 

$(function(){
  // define `_interval` variable
  var _interval;
  // cache `.fadelinks` element
  var elem = $(".fadelinks");
  elem.find("> :gt(0)").hide();
  elem.hover(function() {
    // "pause" at `hover` of `.fadelinks`
    clearInterval(_interval)    
  }, function() {
    // "reset"
    interval()   
  });
  var interval = function() {
  _interval = setInterval(function(){
                elem.find("> :first-child")
               .fadeOut().next().fadeIn().end()
               .appendTo(elem);
              }, 2000)
  };
  interval()
});

JSFIDDLE https://jsfiddle.net/ccmgdfog/4/

在你的情况下，不需要jQuery。只有stopInterval你才能控制它。通过jQuery $.stop()函数，我们不会得到想要的结果。

我已经更改了您的代码：

$(function(){
    $('.fadelinks > :gt(0)').hide();
    var interval = setInterval(intervalFunc, 2000);

    $('.fadelinks').on('mouseenter',function(){
        clearInterval(interval);
    });
    $('.fadelinks').on('mouseout',function(){
        interval = setInterval(intervalFunc, 2000);
    });
    function intervalFunc(){
        $('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');
    }
});
相关文章：