CODEWITHSUNDEEP
jqueryhtmlcss
Haikukitty
Haikukitty

Reputation: 162

Looping between hover states

I have a sort of silly website request - they want the hover states to animate because they think no one will know there are links there otherwise...

Anyway... I created a slideshow to show the effect I'm trying to create - but now I can't get it to work with the jQuery code. I found what I thought was an answer here: Trying to loop between CSS classes/hover states - Jquery

but even incorporating this new code, the animation/toggle doesn't work.

I assume I'm missing something obvious - can anyone help?

Here's the slideshow version to show effect I'm going for: http://test.fatcat-studios.com/gtm/index.html but I want to do this with jQuery so when you interact with it, the correct hover state shows upon actual mouse over.

And here's my jQuery code:

    $(function() {
    var doToggle = true;                            
    $('a.res').removeClass('hover');
    $('a.com').addClass('hover');                           
    var tid = setInterval( function() {
    if (doToggle) $('a.res, a.com').toggleClass('hover');
    }, 2000);

    setTimeout(function() {

    if (tid) clearInterval(tid);

    $('a.res,a.com').removeClass('hover');
    }, 30000); // stop toggling after 30 seconds

    $('a.res,a.com').hover( function() {
    doToggle = false;
    }, function() {
    doToggle = true;
    });
    });

Any help is much appreciated! Let me know if there's more info needed. Haikukitty

Upvotes: 1

Views: 238

Answers (2)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

Try this :

$(function() {
    var autoToggle = true;
    var $togglers = $('a.res, a.com');

    var tid_1,
        tid_2 = setTimeout(function() {
        clearInterval(tid_1);
        $togglers.removeClass('hover');
        autoToggle = false;
    }, 30000); // stop toggling after 30 seconds

    $togglers.hover(function() {
        clearInterval(tid_1);
        $togglers.removeClass('hover');
        $(this).addClass('hover');
    }, function() {
        if(autoToggle) {
            $('a.res').removeClass('hover');
            $('a.com').addClass('hover');
            tid_1 = setInterval(function() {
                $togglers.toggleClass('hover');
            }, 2000);
        }
        else {
            $togglers.removeClass('hover');
        }
    }).triggerHandler('mouseout');
});

Upvotes: 1

Alex Coplan
Alex Coplan

Reputation: 13371

AFAIK there is no way to simulate CSS hover state with JS. However, if you want a simple jQuery solution, this should do what you want (fiddle).

CSS (use :hover pseudo-class)

#clicky {
    color:#000;
}

#clicky:hover {
    color:#FFBF00;
}

​JS

yep = true; // just a global var to stop it flashing when the user hovers
// you may want to persist this differently

$(function() {
    setInterval(function() {
        if (yep) {
            var $c = $('#clicky');
            $c.css({color: $c.hasClass('active') ? '#000' : '#FFBF00'}).toggleClass('active');
        }
    }, 1 * 1000);

    $('#clicky').hover(function() {
        yep = false;
    }, function() {
        yep = true;
    });
});​

Upvotes: 1

Related Questions