Transform the hover effect of a div using a jQuery interval

Question

Transform the hover effect of a div using a jQuery interval

Seeking guidance as a jQuery beginner. I am looking to create 5 classes (.button1 - .button5) with a timer that alternates the hover or active state of the next class every 4000ms in a continuous loop. Additionally, I would like the timer to pause and resume if the user hovers over another one of the classes. Any suggestions on where to start or any threads with a similar solution would be appreciated. Diagram attached.

CSS

.wrapper { width:100%; margin:0 auto; background:#f3f3f3; }
#buttonblock { display:block; }
.button1, .button2, .button3, .button4, .button5 { display:inline-block; margin:0 5px; height:50px; width:50px; border-radius:25px; background:#3cc8dd; }
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover{ background:#fbc040; }

HTML

<div class="wrapper">
<div id="buttonblock">
    <div class="button1"></div>
    <div class="button2"></div>
    <div class="button3"></div>
    <div class="button4"></div>
    <div class="button5"></div>
</div>
</div>

javascript jquery html css timer

Answer 1

Answer №1

To iterate through the array of objects, you can utilize a simple loop like this:

var $buttons = $('#buttonblock div');

for (var x=0; x<$buttons.length; x++)
{
    var element = $buttons[x]; // convert dom element to jQuery object using $(element)
    // perform desired actions here, such as setting intervals.
    if(x == $buttons.elngth)
        x=0; // reset the loop
}

Answer 2

To iterate through the array of objects, you can utilize a simple loop like this:

var $buttons = $('#buttonblock div');

for (var x=0; x<$buttons.length; x++)
{
    var element = $buttons[x]; // convert dom element to jQuery object using $(element)
    // perform desired actions here, such as setting intervals.
    if(x == $buttons.elngth)
        x=0; // reset the loop
}

Answer 3

Answer №2

HTML

<div class="container">
<div id="buttonsection">
    <div class="btn btn1"></div>
    <div class="btn btn2"></div>
    <div class="btn btn3"></div>
    <div class="btn btn4"></div>
    <div class="btn btn5"></div>
</div>

CSS

.highlight {
 background:#fbc040;
}

JavaScript

var counter = 1;
var timer;
$(document).ready(function () {
 startTimer();
 $('.btn').mouseenter(function () {
    $('.highlight').removeClass('highlight');
    clearInterval(timer);
 });

 $('.btn').mouseleave(function () {
    startTimer();
 });
});

function startTimer() {
 timer = setInterval(function () {
  counter = (counter > 5) ? 1 : counter;
  $('.highlight').removeClass('highlight');
  $('.btn' + counter).addClass('highlight');
  counter++;
 }, 4000);
}

Link to JSFiddle

Answer 4

HTML

<div class="container">
<div id="buttonsection">
    <div class="btn btn1"></div>
    <div class="btn btn2"></div>
    <div class="btn btn3"></div>
    <div class="btn btn4"></div>
    <div class="btn btn5"></div>
</div>

CSS

.highlight {
 background:#fbc040;
}

JavaScript

var counter = 1;
var timer;
$(document).ready(function () {
 startTimer();
 $('.btn').mouseenter(function () {
    $('.highlight').removeClass('highlight');
    clearInterval(timer);
 });

 $('.btn').mouseleave(function () {
    startTimer();
 });
});

function startTimer() {
 timer = setInterval(function () {
  counter = (counter > 5) ? 1 : counter;
  $('.highlight').removeClass('highlight');
  $('.btn' + counter).addClass('highlight');
  counter++;
 }, 4000);
}

Link to JSFiddle

Answer 5

Answer №3

Give this a shot

const buttons = $('#buttonblock').children('button'),
    totalButtons = buttons.length,
    currentIndex = 0,
    timeInterval = 3000;

function startTimer() {
    buttons.removeClass('active');
    buttons.eq(currentIndex).addClass('active');
    currentIndex++;
    if (currentIndex === totalButtons) {
        currentIndex = 0;
    }
}

startTimer();
const timer = setInterval(startTimer, timeInterval);

buttons.mouseenter(function () {
    clearInterval(timer);
    buttons.removeClass('active');
    const currentButton = $(this);
    currentButton.addClass('active');
    currentIndex = buttons.index(currentButton);
}).mouseleave(function () {
    timer = setInterval(startTimer, timeInterval);
});

Check out the demo using setInterval

Alternatively, explore the setTimeout method here

Answer 6

Give this a shot

const buttons = $('#buttonblock').children('button'),
    totalButtons = buttons.length,
    currentIndex = 0,
    timeInterval = 3000;

function startTimer() {
    buttons.removeClass('active');
    buttons.eq(currentIndex).addClass('active');
    currentIndex++;
    if (currentIndex === totalButtons) {
        currentIndex = 0;
    }
}

startTimer();
const timer = setInterval(startTimer, timeInterval);

buttons.mouseenter(function () {
    clearInterval(timer);
    buttons.removeClass('active');
    const currentButton = $(this);
    currentButton.addClass('active');
    currentIndex = buttons.index(currentButton);
}).mouseleave(function () {
    timer = setInterval(startTimer, timeInterval);
});

Check out the demo using setInterval

Alternatively, explore the setTimeout method here

Transform the hover effect of a div using a jQuery interval

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to set the menu to automatically open when the page loads?

Choose images at random from an array within a React Native application

How can you prioritize one CSS file over another?

Utilize a CompareValidator to evaluate conditions only when necessary

jQuery Chosen not triggering the onchange event after updating the value using JavaScript

Insert a clickable element within an HTML document

Improving Website SEO with jQuery-Generated Anchor Links for Dynamic Content

Include the image pathway within the script to retrieve the image from the JSON file

Ways to restart script following Ajax call when additional search results are loaded

Delay showing the div until it has finished loading

Showcase a picture within a row of a table using Ajax in an MVC framework

How can I manage the horizontal scrolling in a large, expansive HTML Bootstrap table?

Bringing in an outside JavaScript document into VueJS

Show button once modal has been closed

The axios method remains dormant even after submitting the form in React

Asynchronous jQuery operations using promises and finally functionality

Manipulate SVG elements by dragging them along the boundary of the path

Using listBox in conjunction with Jquery

Sending a bulky item as a straightforward argument or object

Retrieve information from api and showcase it in html