javascript - mostrar - Muestra y oculta divs en un intervalo de tiempo específico usando jQuery

mostrar y ocultar div jquery

Question

Me gustaría mostrar divs en un intervalo específico (10 segundos) y mostrar el siguiente div y seguir y repetir lo mismo.

**

Secuencia :

** En el décimo segundo show div1, esconde otros divs,
Después de 5 segundos de intervalo Muestra div 2 y oculta otros divs,
Después de 5 segundos de intervalo Muestra div 3 y oculta otros divs,
y repita lo mismo por cada 10 segundos.

Code Follows:

<div id=''div1'' style="display:none;">
<!-- content -->
</div>
<div id=''div2'' style="display:none;">
<!-- content -->
</div>
<div id=''div3'' style="display:none;">
<!-- content -->
</div>

Answer 1

Aquí hay otro punto sobre este problema, usando la recursión y sin usar variables mutables. Además, no estoy utilizando setInterval por lo que no hay que hacer una limpieza.

Tener este HTML

<section id="testimonials">
<h2>My testimonial spinner</h2>
<div class="testimonial">
<p>First content</p>
</div>
<div class="testimonial">
<p>Second content</p>
</div>
<div class="testimonial">
<p>Third content</p>
</div>
</section>

Usando ES2016

Aquí llama a la función recursivamente y actualiza los argumentos.

 const testimonials = $(''#testimonials'')
.children()
.filter(''div.testimonial'');
const showTestimonial = index => {
testimonials.hide();
$(testimonials[index]).fadeIn();
return index === testimonials.length
? showTestimonial(0)
: setTimeout(() => { showTestimonial(index + 1); }, 10000);
}
showTestimonial(0); // id of the first element you want to show.

Answer 2

Pasa a través de divs cada 10 segundos.

$(function () {
var counter = 0,
divs = $(''#div1, #div2, #div3'');
function showDiv () {
divs.hide() // hide all divs
.filter(function (index) { return index == counter % 3; }) // figure out correct div to show
.show(''fast''); // and show it
counter++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
setInterval(function () {
showDiv(); // show next div
}, 10 * 1000); // do this every 10 seconds
});

Answer 3

Prueba esto

 $(''document'').ready(function(){
window.setTimeout(''test()'',time in milliseconds);
});
function test(){
$(''#divid'').hide();
}

Answer 4

Ver InnerFade .

<script type="text/javascript">
$(document).ready(
function() {
$(''#portfolio'').innerfade({
speed: ''slow'',
timeout: 10000,
type: ''sequence'',
containerheight: ''220px''
});
});
</script>
<ul id="portfolio">
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html">
<img src="images/ggbg.gif" alt="Good Guy bad Guy" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html">
<img src="images/whizzkids.gif" alt="Whizzkids" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html">
<img src="images/km.jpg" alt="Königin Mutter" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html">
<img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html">
<img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" />
</a>
</li>
</ul>

Answer 5

aquí hay un plugin de jQuery que se me ocurrió:

$.fn.cycle = function(timeout){
var $all_elem = $(this)
show_cycle_elem = function(index){
if(index == $all_elem.length) return; //you can make it start-over, if you want
$all_elem.hide().eq(index).fadeIn()
setTimeout(function(){show_cycle_elem(++index)}, timeout);
}
show_cycle_elem(0);
}

Necesitas tener un nombre de clase común para todos los divs que quieras ciclar, úsalo así:

$("div.cycleme").cycle(5000)

Answer 6

Ejemplo de trabajo aquí: agregar / editar a la URL para jugar con el código

Solo necesitas usar la función JavaScript setInterval

$(''html'').addClass(''js'');
$(function() {
var timer = setInterval( showDiv, 5000);
var counter = 0;
function showDiv() {
if (counter ==0) { counter++; return; }
$(''div'',''#container'')
.stop()
.hide()
.filter( function() { return this.id.match(''div'' + counter); })
.show(''fast'');
counter == 3? counter = 0 : counter++;
}
});

y el HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
.display { width:300px; height:200px; border: 2px solid #000; }
.js .display { display:none; }
</style>
</head>
<body>
<h2>Example of using setInterval to trigger display of Div</h2>
<p>The first div will display after 10 seconds...</p>
<div id=''container''>
<div id=''div1'' class=''display'' style="background-color: red;">
div1
</div>
<div id=''div2'' class=''display'' style="background-color: green;">
div2
</div>
<div id=''div3'' class=''display'' style="background-color: blue;">
div3
</div>
<div>
</body>
</html>

EDITAR:

En respuesta a tu comentario sobre el contenedor div, solo modifica esto

$(''div'',''#container'')

a esto

$(''#div1, #div2, #div3'')