试图在CSS类/悬停状态之间循环 - Jquery

问题描述

我试图在JQuery中创建一个函数，无限期地在非悬停状态和悬停状态之间创建一对连接，直到我的 abortTimer 函数被触发。我想在相反的时间在 a.mus-plr 和 a.earbuds 之间进行动画，所以当其中一个元素有它的'。hover'类启用，另一个不会启用'。hover'类。我希望每个元素在每3000毫秒的悬停状态之间进行切换。

I am trying to create a function in JQuery which animates a couple links between their non-hovered and hover states indefinitely until my abortTimer function is fired. I would like to animate between a.mus-plr and a.earbuds at opposing times, so when one of the elements has it's '.hover' class enabled, the other would not have it's '.hover' class enabled. I would like each element to switch between it's hover states every 3000 milliseconds.

任何帮助都将非常感谢！我似乎无法得到这个工作。我想这可能是一个问题，我已经定义了我的setInterval计时器。感谢!!

Any help would be much appreciated! I can't seem to get this to work. I'm thinking it might be a problem with how I've defined my setInterval timer. Thanks!!

JQuery文件：

JQuery file:

$(document).ready(function(){
    var tid = setInterval(animateControls, 4000);
    function animateControls() {
        $("a.mus-plr").delay(2000).addClass('hover').delay(2000).removeClass('hover');
        $("a.earbuds").addClass('hover').delay(2000).removeClass('hover');
    }
    function abortTimer() {
        clearInterval(tid);
    }
});

推荐答案

您只需在每次间隔计时器到期时切换 hover 类，假设他们从一个开始另一个没有悬停类。

You simply toggle the hover class each time your interval timer expires, assuming they start off with one having and the other not having the hover class.

已编辑可停止元素悬停时的自动切换。

Edited to stop the automated toggle when an element is hovered.

$(function() {
     var doToggle = true;

     $('a.mus-plr').removeClass('hover');
     $('a.earbuds').addClass('hover');

     var tid = setInterval( function() {
          if (doToggle) $('a.mus-plr, a.earbuds').toggleClass('hover');
     }, 2000);

     setTimeout(function() {
        if (tid) clearInterval(tid);
        $('a.mus-plr,a.earbuds').removeClass('hover');
     }, 30000); // stop toggling after 30 seconds

     $('a.mus-plr,a.earbuds').hover( function() {
           doToggle = false;
     }, function() {
           doToggle = true;
     });
});

这篇关于试图在CSS类/悬停状态之间循环 - Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！