CODEWITHSUNDEEP
javascriptjqueryhtmlcsssetinterval
BlasphemyTJ
BlasphemyTJ

Reputation: 3

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

I'm sure this is very easy but I am stuck. I have been playing around with this JSFiddle for awhile but can't figure out how to change the click to a hover or mouse enter/exit trigger. I've tried to apply what other questions have suggested to similar issues but I was only able to make the font change once for each mouseover. Am I going about this the right way, or is there a easier way to accomplish this?

My understanding of this is that the "click" trigger is being set every 1.5 secs, I cannot have this as it closes the expanding nav bar on my website every time it clicks. My goal is to have the font rotate through but only while hovering over a certain id or class. I was noticing a lot of similar questions had a stop or clear to the interval... Thank you in advance for any info.

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() {?

Upvotes: 0

Views: 63

Answers (1)

CodingIntrigue
CodingIntrigue

Reputation: 78585

You need to assign the result from the setInterval which is a reference to that timer:

var intervalId = setInterval(function() {

   var e = $.Event("click");

    $('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').trigger('click');
}, 1500);

clearInterval(intervalId):

There are some really good examples of how to use it over on MDN.

Upvotes: 1

Related Questions