We Keep Coding

simulate clicks without user interactivity every x seconds

I have 5 divs every div call H4.
I create this by javascript to get the result and it works but now I need it to do this automatically in sequence without user interactivity to be like auto slider, for example, caption1 should click first and show caption1content after 8 seconds caption 2 clicks and show captoin2content and so on how can I do this by javascript.
JS:
$("#caption1").on('click', function() {
$("#caption1content").fadeIn();
$("#caption2content,#caption3content,#caption4content,#caption5content").fadeOut();
});
$("#caption2").on('click', function() {
$("#caption2content").fadeIn();
$("#caption1content,#caption3content,#caption4content,#caption5content").fadeOut();
});
$("#caption3").on('click', function() {
$("#caption3content").fadeIn();
$("#caption1content,#caption2content,#caption4content,#caption5content").fadeOut();
});
$("#caption4").on('click', function() {
$("#caption4content").fadeIn();
$("#caption1content,#caption2content,#caption3content,#caption5content").fadeOut();
});
$("#caption5").on('click', function() {
$("#caption5content").fadeIn();
$("#caption1content,#caption2content,#caption3content,#caption4content").fadeOut();
});
HTML:
<div id="caption">
<h4 id="caption1content" class="ccntnt">text1</h4>
<h4 id="caption2content" class="ccntnt">text2</h4>
<h4 id="caption3content" class="ccntnt">text3</h4>
<h4 id="caption4content" class="ccntnt">text4</h4>
<h4 id="caption5content" class="ccntnt">text5</h4>
</div>
<div id="captionbtns">
<div id="caption1">text1</div>
<div id="caption2">text2</div>
<div id="caption3">text3</div>
<div id="caption4">text4</div>
<div id="caption5">text5</div>
</div>

well it is pretty simple you can use setInterval and you can do it like this not the perfect way but working.
it will click after every 8 seconds it will only loop through it once and further you can use a if condition to reset the count if you want to run it again and again;
let count = 1;
setInterval(function(){
$(`#caption${count}`).click();
count++;
},8000);

Stop jQuery Fade Loop and add Hover Not Working

I am trying to implement a fade in- fade out loop in jQuery
You can see it here
But this does not work the way I want it to. This code just stops the Fade loop when I hover over the point1.
I want the code to work in such a way that when you hover over one of the points (point1, point2 etc.), the fade loop will stop/pause, and only the specified .trip will show, then on hover out/mouseout, the fade loop will start over from the top.
For example:
If I hover over <div class="point2">Hover Point 2</div>, the loop should stop, and only <div id="2" class="trip two">Item2</div> should be shown. Or if I hover over <div class="point1">Hover Point 1</div> during the loop, the loop should stop and <div id="2" class="trip one">Item1</div>, should be shown, and once on mouseout, the loop should start from the top.
Tried a bunch of stuff, help please.
How do I fix this?

You are correctly stopping the animation, but then you need to display the proper element and hide all others. Also, you want to re-start the loop by calling go when you mouseout.
$('.point1').hover(function(){
$('.trip').stop(true).hide();
$("#1").show();
},function(){
i = 0;
go();
});
http://jsfiddle.net/MtmxN/68/

Here's my take on it:
HTML:
<div id="main">
<div id="1" class="trip 1">Item1</div>
<div id="2" class="trip">Item2</div>
<div id="3" class="trip">Item3</div>
</div>
<hr>
<br/>
<div class="point" id="show1">Hover Point 1</div>
<br/>
<div class="point" id="show2">Hover Point 2</div>
<br/>
<div class="point" id="show3">Hover Point 3</div>
JS
var $elem = $('#main .trip'), l = $elem.length, i = 0;
function go() {
$elem.eq(i % l).fadeIn(700, function() {
$elem.eq(i % l).fadeOut(700, go);
i++;
})
}
go();
var tripToShow = 0;
$('.point').hover(function(){
tripToShow = this.id.replace('show', '');
$('.trip').stop(true).hide();
$('#'+tripToShow).show();
},function(){
$('.trip').hide();
i = 1;
tripToShow = 0;
go();
});
fiddle: http://jsfiddle.net/stevoperisic/GKZ2F/

Show div every 3 seconds using jquery

i have these two divs and would like to know how can i display the second (box2) div every 3 seconds.
<div id="box1" style="background-color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<div id="box2" style="background-color:red">
<h3>This is a heading in a div element</h3>
how can i do this with jquery ?
i created a fiddle here. http://jsfiddle.net/jRmrp/5/
Update 1
The answer given by Khanh TO works but i am wondering what to do when div count is more than 2. it only allows for two.

You need this?
setInterval(function(){
$("#box2").toggle();
$("#box1").toggle();
},3000);
DEMO
Updated with new requirement:
var currentIndex = 0;
$(".box:not(:eq("+ currentIndex +"))").hide();
var totalDiv = $(".box").length;
setInterval(function(){
currentIndex = (currentIndex + 1) % totalDiv;
$(".box").hide();
$(".box").eq(currentIndex).show();
},3000);
DEMO

jsFiddle demo
doBoxBlink = setInterval(blink, 1500);
function blink() {
$('#box2').toggle();
}

Select next element carousel

I have a list of DIVs, and I want every X second using setTimeout to take the next div and set the display to block, and for the other ones to none, how can I do that? Can someone please give me an example?
How can I make it to be infinite, when reaches the last one to start from the first one again.
I know this is a kind of carousel, but I want too see how it's done.

There are many ways to do this, but here's one way: http://jsfiddle.net/jfriend00/Yr3NV/
HTML:
<div id="container">
<div class="item active">1111</div>
<div class="item">2222</div>
<div class="item">3333</div>
<div class="item">4444</div>
<div class="item">5555</div>
<div class="item">6666</div>
<div class="item">7777</div>
</div>
Code:
setInterval(function() {
var next = $("#container .active").removeClass("active").next();
if (next.length == 0) {
next = $("#container .item:first");
}
next.addClass("active");
}, 1000);
CSS:
.item {display: none;}
.item.active {display: block;}
Using the method of adding/removing a class gives you a little more style control via CSS rather than coding the style into your javascript and avoids the use of any global or closure variables to keep the state.

var divs = $('#container').find('div'),
index = 0;
setInterval(function() {
if (!divs[index]) index = 0;
divs.hide();
divs[index++].style.display = 'block';
}, 1000); // fires every 1 second
All the usual disclaimers about global scope being a bad idea, but this should give you what you want.

$("#list div").hide();
var current = $("#list div").first().show();
setInterval(function() {
current.hide();
current = current.next().length > 0 ? current.next() : $("#list div").first();
current.show();
},2000);
<div id="list">
<div>1</div>
<div>22</div>
<div>333</div>
<div>4444</div>
</div>
Can be seen working here:
http://jsfiddle.net/KenwV/

Here's an implementation with setTimeout: http://jsfiddle.net/imsky/EBpTw/
Given a UL with id of "list" and LIs inside:
$(function() {
$("#list li:gt(0)").hide();
function showNextBlock() {
var currentBlock = $("#list li:visible");
if (currentBlock.index() == $("#list li").length - 1) {
currentBlock.hide().parent().find("li:first").show()
}
else {
currentBlock.hide().next("li").show();
}
setTimeout(showNextBlock,1000);
}
setTimeout(showNextBlock,1000);
});

DIV LOOP DEMO
var i=0, len=$('#parent div').length;
(function loop(){
$('#parent div').eq(i++%len).fadeTo(700,1).siblings().fadeTo(700,0,loop);
})();
HTML example:
<div id="parent">
<div class="children ch1">I'm DIV 1</div>
<div class="children ch2">I'm DIV 2</div>
<div class="children ch3">I'm DIV 3</div>
<div class="children ch4">I'm DIV 4</div>
</div>
CSS basic setup:
.children{
position:absolute;
}
And here is one with a mouseover pause :
DEMO with mouseover pause

function cycleDivs(base)
{
var next = ($(base).next('div').css('display') == 'none')? $(base).next('div') : $('div:first');
$(base).hide();
$(next).show();
window.setTimeout(function(){cycleDivs(next);}, 1000)
}
window.setTimeout(function(){cycleDivs($('div:first'));}, 1000);
Here's a working example: http://jsfiddle.net/8hfBd/

jQuery fadein/out

I have a div with several images. I need to only display 6 at a time. I then need to fade out current six and fade in next 6 in the list.
I have this wrapped in a setInterval function. Is this possible?
So far, I’ve got:
var hiddenElements = $('.logos div.logo:gt(5)');
hiddenElements.hide();
setInterval(function() {
// …
}, 2000);
"logo" is the class of the divs that need to fade. They all have CSS background images (hence no img tags).

This is very straight approach. Just for fun. But you should optimize your html. Wrap every 6 images in one container and then toggle them - it will more clean and nature solution.
sketch: http://jsfiddle.net/fl00r/HSGF3/4/
<div class='hidden'>1</div>
<div class='hidden'>2</div>
<div class='hidden'>3</div>
<div class='hidden'>4</div>
<div class='hidden'>5</div>
<div class='hidden'>6</div>
<div class='hidden'>7</div>
<div class='hidden'>8</div>
<div class='hidden'>9</div>
<div class='hidden'>10</div>
<div class='hidden'>11</div>
<div class='hidden'>12</div>
<div class='hidden'>13</div>
<div class='hidden'>14</div>
<div class='hidden'>15</div>
<div class='hidden'>16</div>
<script>
$(function(){
fadeByEachSlice(".hidden",6)
})
function fadeByEachSlice(object, step){
var i = 0;
objects = $(object)
function nextSlice(){
if(i%step == 0){
if( i <= objects.length ){
slice = objects.slice(i, step+i);
fadeSlice(slice)
}
}
}
function fadeSlice(slice){
$(slice).fadeIn().delay(1000).fadeOut("fast", function(){
i+=1; nextSlice();
})
}
nextSlice()
}
</script>

you can use jQuery delay function to show 6 images for a while and then fadeout them and fadein next six.