Question

当鼠标悬停在此脚本的fadelinks 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知识非常有限，我所尝试的一切都打破了脚本，它卡在最后一张幻灯片或第一张幻灯片上。就像这个简单的脚本在鼠标悬停时暂停并在鼠标退出时再次启动。

Here's a JSFiddle脚本处于自然状态。

Answer 1

在您的情况下，不需要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');
    }

});

Answer 2

尝试使用.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/

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

2 个答案: