Javascript 鼠标悬停时暂停简单音量控制器脚本

对于此脚本，当鼠标悬停在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的了解非常有限，我尝试的所有方法都会破坏脚本，使它停留在最后一张幻灯片或第一张幻灯片上。希望这个简单的脚本在鼠标悬停时暂停，然后在鼠标退出时重新启动

---

在您的例子中，不需要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');
    }

});

---

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

});

尝试使用

.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()

});

jsIDLE

尝试使用

.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()

});

---

jshiddle

只有当鼠标位于顶部的标题栏上方时才会暂停。它应该暂停在音量控制器上方的任何位置。谢谢，谢谢。这很有帮助。它现在工作得很好。只有当鼠标位于顶部的标题栏上方时，它才会暂停。它应该暂停在音量控制器上方的任何位置。谢谢，谢谢。这很有帮助。现在很好用了，谢谢。这是很棒的代码。它似乎在IE中抛出了一个奇怪的闪烁故障，尽管如果有人在标题范围上停留几秒钟。谢谢你的帮助和时间。谢谢。这是很棒的代码。它似乎在IE中抛出了一个奇怪的闪烁故障，尽管如果有人在标题范围上停留几秒钟。不过我很感谢你的帮助和时间。