ocultar mostrar mismo expandir ejemplos div contraer con boton automaticamente javascript jquery css html timeout

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



mostrar y ocultar div jquery (6)

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.

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>


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 });


Prueba esto

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


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>


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)


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'')