Is there a way to continuously run jQuery code or reset it?

Question

Is there a way to continuously run jQuery code or reset it?

Can you help me create a loop that will continuously run this script after it finishes executing, repeating the process indefinitely?

I want to keep running this code over and over again.

This script is using jQuery version 3.5.1

// Title
    var title1 = document.getElementById("slide-text-title-id");
    var title2 = document.getElementById("slide-text-title-id-2");
    var title3 = document.getElementById("slide-text-title-id-3");

        $(document).ready(function () {
            setTimeout(function () {
                $(title1).css("opacity", "1");
                $(title1).css("transition", "0.5s");
            }, 500);
            setTimeout(function () {
                $(title1).css("opacity", "0");
            }, 6000);
            setTimeout(function () {
                $(title1).css("opacity", "1");
            }, 20000);
        });

        $(document).ready(function () {
            setTimeout(function () {
                $(title2).css("opacity", "1");
                $(title2).css("transition", "0.5s");
            }, 9000);
            setTimeout(function () {
                $(title2).css("opacity", "0");
            }, 13500);
            setTimeout(function () {
                $(title2).css("opacity", "1");
            }, 20000);
        });

        $(document).ready(function () {
            setTimeout(function () {
                $(title3).css("opacity", "1");
                $(title3).css("transition", "0.5s");
            }, 16000);
            setTimeout(function () {
                $(title3).css("opacity", "0");
            }, 21000);
            setTimeout(function () {
                $(title3).css("opacity", "1");
            }, 26500);
        });

javascript html jquery css

Answer 1

Answer №1

The fundamental concept:

// the array of elements:
const elements = ['a', 'b', 'c'];

// the stepper function (also known as walker or iterator)
function stepper(index) {
  // the current element is elements[index];
  // perform an action with the current element:

  console.log({
    index,
    [`currentElement (elements[${index}])`]: elements[index]
  });

  // after a set time interval (3000ms), call this function again with the next index:
  // when the current element is the last one, we restart from the beginning:

  setTimeout(function() {
    stepper(index + 1 < elements.length ? index + 1 : 0);
  }, 3000);
}

// initiate the loop:
stepper(0);

Now, let's apply this concept to some elements. One way to achieve this is by toggling the class active on a series of slides. By using CSS, we can style the active element. To control the animation direction, I'm also incorporating a leaving class to the currently active slide, which is then removed in the next iteration.

The devil is in the details. Attention to details plays a significant role in web development.

const elements = [1, 2, 3];

function stepper(index) {
  // remove the leaving class from all slides
  $('.slider .leaving').removeClass('leaving');

  // add the leaving class to the previously active item and remove the active class
  $('.slider .active').addClass('leaving').removeClass('active');

  // add the active class to the current item
  $('.slider > div').eq(index).addClass('active');

  setTimeout(() => stepper(index < elements.length - 1 ? index + 1 : 0), 2100);
}

// initiate the infinite loop:

stepper(0);

body {
  margin: 0;
}
.slider {
  position: relative;
  overflow: hidden;
}

.slider > div {
  font-size: 7rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transform: translateX(100%);
  background-color: #ccc;
  color: white;
}
.slider .leaving {
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}
.slider .active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  transition: transform .42s cubic-bezier(.4,0,.2,1)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

Note: I aimed to explain the core concept followed by a basic implementation. Real-world code tends to be more intricate and elaborate. Based on your current approach, I suggest starting with the fundamentals.

One of the most effective ways to learn is by watching tutorials while simultaneously experimenting with the code provided. Don't hesitate to make alterations. Gradually modify every component and observe how it affects the outcome.

At each step, utilize console.log({ stuff }) to inspect the contents of stuff at that precise point.
Break the code. Understanding why it breaks will enhance your comprehension of that segment as well!

Answer 2

The fundamental concept:

// the array of elements:
const elements = ['a', 'b', 'c'];

// the stepper function (also known as walker or iterator)
function stepper(index) {
  // the current element is elements[index];
  // perform an action with the current element:

  console.log({
    index,
    [`currentElement (elements[${index}])`]: elements[index]
  });

  // after a set time interval (3000ms), call this function again with the next index:
  // when the current element is the last one, we restart from the beginning:

  setTimeout(function() {
    stepper(index + 1 < elements.length ? index + 1 : 0);
  }, 3000);
}

// initiate the loop:
stepper(0);

Now, let's apply this concept to some elements. One way to achieve this is by toggling the class active on a series of slides. By using CSS, we can style the active element. To control the animation direction, I'm also incorporating a leaving class to the currently active slide, which is then removed in the next iteration.

The devil is in the details. Attention to details plays a significant role in web development.

const elements = [1, 2, 3];

function stepper(index) {
  // remove the leaving class from all slides
  $('.slider .leaving').removeClass('leaving');

  // add the leaving class to the previously active item and remove the active class
  $('.slider .active').addClass('leaving').removeClass('active');

  // add the active class to the current item
  $('.slider > div').eq(index).addClass('active');

  setTimeout(() => stepper(index < elements.length - 1 ? index + 1 : 0), 2100);
}

// initiate the infinite loop:

stepper(0);

body {
  margin: 0;
}
.slider {
  position: relative;
  overflow: hidden;
}

.slider > div {
  font-size: 7rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transform: translateX(100%);
  background-color: #ccc;
  color: white;
}
.slider .leaving {
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}
.slider .active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  transition: transform .42s cubic-bezier(.4,0,.2,1)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

Note: I aimed to explain the core concept followed by a basic implementation. Real-world code tends to be more intricate and elaborate. Based on your current approach, I suggest starting with the fundamentals.

One of the most effective ways to learn is by watching tutorials while simultaneously experimenting with the code provided. Don't hesitate to make alterations. Gradually modify every component and observe how it affects the outcome.

At each step, utilize console.log({ stuff }) to inspect the contents of stuff at that precise point.
Break the code. Understanding why it breaks will enhance your comprehension of that segment as well!

Answer 3

Answer №2

using the function setInterval

var interval = setInterval(function ()
{
  // Retrieving elements by id
  var title1 = document.getElementById("slide-text-title-id");
  var title2 = document.getElementById("slide-text-title-id-2");
  var title3 = document.getElementById("slide-text-title-id-3");

  $(document).ready(function () {
      // Setting opacity and transition for title1
      setTimeout(function () {
          $(title1).css("opacity", "1");
          $(title1).css("transition", "0.5s");
      }, 500);
      setTimeout(function () {
          $(title1).css("opacity", "0");
      }, 6000);
      setTimeout(function () {
          $(title1).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      // Setting opacity and transition for title2
      setTimeout(function () {
          $(title2).css("opacity", "1");
          $(title2).css("transition", "0.5s");
      }, 9000);
      setTimeout(function () {
          $(title2).css("opacity", "0");
      }, 13500);
      setTimeout(function () {
          $(title2).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      // Setting opacity and transition for title3
      setTimeout(function () {
          $(title3).css("opacity", "1");
          $(title3).css("transition", "0.5s");
      }, 16000);
      setTimeout(function () {
          $(title3).css("opacity", "0");
      }, 21000);
      setTimeout(function () {
          $(title3).css("opacity", "1");
      }, 26500);
  });

}, 0);

Alternatively, you can achieve the same using setTimeout

var timer;
!function loop()
{
  // Retrieving elements by id
  var title1 = document.getElementById("slide-text-title-id");
  var title2 = document.getElementById("slide-text-title-id-2");
  var title3 = document.getElementById("slide-text-title-id-3");

  $(document).ready(function () {
      // Setting opacity and transition for title1
      setTimeout(function () {
          $(title1).css("opacity", "1");
          $(title1).css("transition", "0.5s");
      }, 500);
      setTimeout(function () {
          $(title1).css("opacity", "0");
      }, 6000);
      setTimeout(function () {
          $(title1).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      // Setting opacity and transition for title2
      setTimeout(function () {
          $(title2).css("opacity", "1");
          $(title2).css("transition", "0.5s");
      }, 9000);
      setTimeout(function () {
          $(title2).css("opacity", "0");
      }, 13500);
      setTimeout(function () {
          $(title2).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      // Setting opacity and transition for title3
      setTimeout(function () {
          $(title3).css("opacity", "1");
          $(title3).css("transition", "0.5s");
      }, 16000);
      setTimeout(function () {
          $(title3).css("opacity", "0");
      }, 21000);
      setTimeout(function () {
          $(title3).css("opacity", "1");
      }, 26500);
  });
  timer = setTimeout(loop, 0);
}();

Answer 4

using the function setInterval

var interval = setInterval(function ()
{
  // Retrieving elements by id
  var title1 = document.getElementById("slide-text-title-id");
  var title2 = document.getElementById("slide-text-title-id-2");
  var title3 = document.getElementById("slide-text-title-id-3");

  $(document).ready(function () {
      // Setting opacity and transition for title1
      setTimeout(function () {
          $(title1).css("opacity", "1");
          $(title1).css("transition", "0.5s");
      }, 500);
      setTimeout(function () {
          $(title1).css("opacity", "0");
      }, 6000);
      setTimeout(function () {
          $(title1).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      // Setting opacity and transition for title2
      setTimeout(function () {
          $(title2).css("opacity", "1");
          $(title2).css("transition", "0.5s");
      }, 9000);
      setTimeout(function () {
          $(title2).css("opacity", "0");
      }, 13500);
      setTimeout(function () {
          $(title2).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      // Setting opacity and transition for title3
      setTimeout(function () {
          $(title3).css("opacity", "1");
          $(title3).css("transition", "0.5s");
      }, 16000);
      setTimeout(function () {
          $(title3).css("opacity", "0");
      }, 21000);
      setTimeout(function () {
          $(title3).css("opacity", "1");
      }, 26500);
  });

}, 0);

Alternatively, you can achieve the same using setTimeout

var timer;
!function loop()
{
  // Retrieving elements by id
  var title1 = document.getElementById("slide-text-title-id");
  var title2 = document.getElementById("slide-text-title-id-2");
  var title3 = document.getElementById("slide-text-title-id-3");

  $(document).ready(function () {
      // Setting opacity and transition for title1
      setTimeout(function () {
          $(title1).css("opacity", "1");
          $(title1).css("transition", "0.5s");
      }, 500);
      setTimeout(function () {
          $(title1).css("opacity", "0");
      }, 6000);
      setTimeout(function () {
          $(title1).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      // Setting opacity and transition for title2
      setTimeout(function () {
          $(title2).css("opacity", "1");
          $(title2).css("transition", "0.5s");
      }, 9000);
      setTimeout(function () {
          $(title2).css("opacity", "0");
      }, 13500);
      setTimeout(function () {
          $(title2).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      // Setting opacity and transition for title3
      setTimeout(function () {
          $(title3).css("opacity", "1");
          $(title3).css("transition", "0.5s");
      }, 16000);
      setTimeout(function () {
          $(title3).css("opacity", "0");
      }, 21000);
      setTimeout(function () {
          $(title3).css("opacity", "1");
      }, 26500);
  });
  timer = setTimeout(loop, 0);
}();

Is there a way to continuously run jQuery code or reset it?

Answer №1

Answer №2

Similar questions

Transform JSON array containing identical key-value pairs

Copying the position of one object to another in THREE.js does not function as expected

Tips for maintaining the order in a JavaScript Map structure

Clicking on the ng-repeat will trigger the ng-click event, which populates all the data using ng

Encountering TypeError with Next.js and Firebase: Unable to access properties of undefined (specifically 'apps')

Sending the selected multiple values to the controller function

Is the treatment of proto different in the fetch API compared to manual assignment?

vertically centering a div specifically on laptops

eliminating the hues beneath the lines on Morris region charts

What strategies can be implemented to enhance the performance of this jQuery slider?

The Prev and Next controls on the web carousel have mysteriously vanished

Enhance your website with a dynamic div zoom feature using the Jquery Zoom

Error message: The Bootstrap .dropdown() method failed because it encountered an "Uncaught TypeError: undefined is not a function"

Unexplained vanishing of CSS padding upon form submission

Load data asynchronously using a promise in select2

using the newquestion variable later in the function

Changing Page Content with Ajax Post-Redirect Pattern

The React-Chartjs chart is displaying without any color rendering

Node.js local storage/cookie functionality

Resource Jump.js could not be loaded

Is there a way to continuously run jQuery code or reset it?

Answer №1

Answer №2

Similar questions

Transform JSON array containing identical key-value pairs

Copying the position of one object to another in THREE.js does not function as expected

Tips for maintaining the order in a JavaScript Map structure

Clicking on the ng-repeat will trigger the ng-click event, which populates all the data using ng

Encountering TypeError with Next.js and Firebase: Unable to access properties of undefined (specifically 'apps')

Sending the selected multiple values to the controller function

Is the treatment of __proto__ different in the fetch API compared to manual assignment?

vertically centering a div specifically on laptops

eliminating the hues beneath the lines on Morris region charts

What strategies can be implemented to enhance the performance of this jQuery slider?

The Prev and Next controls on the web carousel have mysteriously vanished

Enhance your website with a dynamic div zoom feature using the Jquery Zoom

Error message: The Bootstrap .dropdown() method failed because it encountered an "Uncaught TypeError: undefined is not a function"

Unexplained vanishing of CSS padding upon form submission

Load data asynchronously using a promise in select2

using the newquestion variable later in the function

Changing Page Content with Ajax Post-Redirect Pattern

The React-Chartjs chart is displaying without any color rendering

Node.js local storage/cookie functionality

Resource Jump.js could not be loaded

Is the treatment of proto different in the fetch API compared to manual assignment?