更改定时'点击'for setInterval to mouseenter/exit

Change a timed 'click' for setInterval to mouseenter/exit

本文关键字：to mouseenter exit setInterval 点击 定时 for      更新时间：2023-09-26

我相信这很容易，但我卡住了。我一直在玩这个JSFiddle一段时间，但不能弄清楚如何改变点击悬停或鼠标进入/退出触发器。我试着应用其他问题对类似问题的建议，但我只能在每次鼠标悬停时更改一次字体。我这样做是正确的吗，还是有更简单的方法来完成?

我对此的理解是，"点击"触发器每1.5秒设置一次，我不能有这个，因为它每次点击都会关闭我网站上的导航栏。我的目标是让字体旋转，但只有当悬停在一个特定的id或类。我注意到很多类似的问题都有一个停顿或明确的间隔…提前感谢您提供的任何信息。

HTML 

<div id="container">
    <div id="change" class="one"></div>
</div>
CSS 

@import url(http://fonts.googleapis.com/css?family=Josefin+Slab|Quattrocento|Sacramento|Give+You+Glory|Poiret+One|Khand|Permanent+Marker|ABeeZee|Ubuntu|Questrial);
#change {
  font-size:2em;
  text-align:center;
  color:#636466;
}
#change:before{
    content:'Change during hover, stop when mouse leaves';
}
.one:before    {
  font-family:'Questrial';
}
.two:before    {
  font-family:'Give You Glory';
}
.three:before  {
  font-family:'Khand';
}
.four:before   {
  font-family:'Josefin Slab';
}
.five:before   {
  font-family:'Sacramento';
}
.six:before    {
  font-family:'ABeeZee';
}
.seven:before  {
  font-family:'Permanent Marker';
}
.eight:before  {
  font-family:'Ubuntu';
}
.nine:before   {
  font-family:'Poiret One';
}

JS 

setInterval(function() {
   var e = $.Event("click");
    $('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').trigger('click');
}, 1500);
$('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').click(function() {
    this.className = {
        three : 'four',
        four  : 'five',
        five  : 'six',
        six   : 'seven',
        seven : 'eight',
        eight : 'nine',
        nine  : 'one',
        one   : 'two',
        two   : 'three'
    }[this.className];
});
//clearInterval(function() {?

您需要将setInterval的结果分配给该计时器的引用:

var intervalId = setInterval(function() {
   var e = $.Event("click");
    $('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').trigger('click');
}, 1500);
clearInterval(intervalId):

在MDN上有一些关于如何使用它的很好的例子。

相关文章：