Toggle div every 10 seconds with jquery?

Question

I have two div settings that when clicked on the link switch from blue to orange. They sit in the same place and just give the impression of rearrangement of one color to another. This is my jquery:

jQuery(document).ready(function( $ ) { $(".dab").click(function(){ $("#pf-orange-area").show(); $("#pf-blue-area").hide(); }); $(".pfs").click(function(){ $("#pf-orange-area").hide(); $("#pf-blue-area").show(); }); }); 

How do I keep this functionality, but also make them switch every 10 seconds automatically?

Answer 1

 jQuery(function($) { var $or = $("#pf-orange-area"), $bl = $("#pf-blue-area"), changeColor; $(".dab").click(function(){ $or.show(); $bl.hide(); }); $(".pfs").click(function(){ $or.hide(); $bl.show(); }); changeColor = function() { $or.toggle(); $bl.toggle(); }; setInterval(changeColor, 10000); }); 

Thus, one of its colored elements should now be hidden and the other displayed.

Answer 2

Use setInterval() in your code. Something like that

 jQuery(document).ready(function ($) { var toggle = function () { $("#pf-orange-area, #pf-blue-area").toggle(); } var anim = setInterval(toggle, 1000); $('button').on('click', function () { clearInterval(anim); }); }); 

To pause / stop the animation, then

 clearInterval(anim); 

Check Updated JSFiddle

Answer 3

setInterval should work here.

Consider:

 window.setInterval(yourfunction, 10000); //10000 = 10 sec function yourfunction() { alert('test'); } //whatever you want it to do, test is purely for demonstration purposes 

Answer 4

 var b = true; setInterval(function() { $( b ? '.dab' : '.pfs').trigger('click'); b = ! b; }, 10000); 

Answer 5

 var i = 0, handle = setInterval(function(){ if(i%2 === 0){ //every other time (0,2,4 etc) $("#pf-orange-area").show(); $("#pf-blue-area").hide(); }else{ // every 'odd' time (1,2,3) $("#pf-orange-area").hide(); $("#pf-blue-area").show(); } i++; },10000); //to stop it: //clearInterval(handle); 

Depending on the initial state of visibility, you may want to switch if and else bodies.

Answer 6

As others have said, you can use setInterval. but for implementation, I suggest this:

 function toggleAreas() { $("#pf-blue-area, #pf-orange-area").toggle(); } $(document).ready(function(){ setInterval(toggleAreas, 10000); }); 

Answer 7

I saw that you finally chose the answer, but decided that I would drop my two cents, as I made this example with a long explanation. Hope this helps you in understanding.

In the first example, there is a variable for the timer, so your 10 seconds can be reset every time a change occurs. Thus, by clicking on elements that have class names, also reset the timer.

Side Note: In the following examples I use . on () . If you use jQuery before 1.7, you can just replace it . on () with . live () .

Example

 var tmrShowHide; // this variable will act as out timer for keeping up with time changes // if you don't want to reset the 10 seconds everytime there is a change, // then please see exmple 2 function divShowHide() { // this will be the method used to change the colors and reset the timer clearTimeout(tmrShowHide); // clears previous timer so 10 seconds is reset // the .toggle method will simply toggle the visible state (display in css) of the element it called upon // so if we start with one hidden and one visible, then this is all that is needed to make the change! // also note that i'm calling both elements at once, as they'll both undergo the "toggle" change $('#pf-blue-area, #pf-orange-area').toggle(); tmrShowHide = setTimeout(divShowHide, 10000); // resets timer to 10 seconds } $(function() { // Same as $(document).ready(function() { // just shorter! // the following establiches our click event on the 2 class types $(document).on('click', '.dab, .pfs', divShowHide); // this will begin the timer and give us a variable that can be cleared as needed tmrShowHide = setTimeout(divShowHide, 10000); }) 

Thus, without comment, it is as simple as:

 var tmrShowHide; function divShowHide() { clearTimeout(tmrShowHide); $('#pf-blue-area, #pf-orange-area').toggle(); tmrShowHide = setTimeout(divShowHide, 10000); } $(function() { $(document).on('click', '.dab, .pfs', divShowHide); tmrShowHide = setTimeout(divShowHide, 10000); }) 

---

---

---

This next example is much shorter in that it does not reset the timer, so clicking on a class element to make a change will not prevent it from changing every 10 seconds.

Example 2

 function divShowHide(e) { // this will be the method used to change the colors // the .toggle method will simply toggle the visible state (display in css) of the element it called upon // so if we start with one hidden and one visible, then this is all that is needed to make the change! // also note that i'm calling both elements at once, as they'll both undergo the "toggle" change $('#pf-blue-area, #pf-orange-area').toggle(); } $(function() { // Same as $(document).ready(function() { // just shorter! // the following establishes our click event on the 2 class types $(document).on('click', '.dab, .pfs', divShowHide); // this will begin the unstoppable 10 second timer setInterval(divShowHide, 10000); }) 

Thus, without comment, it is as simple as:

 function divShowHide(e) { $('#pf-blue-area, #pf-orange-area').toggle(); } $(function() { $(document).on('click', '.dab, .pfs', divShowHide); setInterval(divShowHide, 10000); }) 

The Blinker! ( _{just for fun} )