Show and hide divs at a specific time interval using jQuery

Question

I would like to show divs at a specific interval  10 seconds  and show next div and as go on and repeat the same           Sequence        On 10th second show div1   hide other divs   After 5seconds interval  Show div 2 and hide other divs   After 5 seconds interval Show div 3 and hide other divs    and repeat the same for every 10 seconds        Code Follows       lt div id  div1  style  display none   gt      lt  -- content -- gt   lt  div gt    lt div id  div2  style  display none   gt      lt  -- content -- gt   lt  div gt    lt div id  div3  style  display none   gt      lt  -- content -- gt   lt  div gt

User · Accepted Answer

Working Example here - add  edit to the URL to play with the code  You just need to use JavaScript setInterval function   x000D   x000D     html   addClass  js    x000D   x000D    function     x000D   x000D    var timer   setInterval showDiv  5000   x000D   x000D    var counter   0  x000D   x000D    function showDiv     x000D      if  counter    0    x000D        counter    x000D        return  x000D        x000D   x000D         div     container   x000D         stop   x000D         hide   x000D         filter function     x000D          return this id match  div    counter   x000D           x000D         show  fast    x000D      counter    3   counter   0   counter    x000D   x000D      x000D   x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN  x000D          http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt  x000D   x000D   lt head gt  x000D     lt script src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt  x000D     lt title gt Sandbox lt  title gt  x000D     lt meta http-equiv  Content-type  content  text html  charset utf-8    gt  x000D     lt style type  text css  media  screen  gt  x000D      body   x000D        background-color   fff  x000D        font  16px Helvetica  Arial  x000D        color   000  x000D        x000D       x000D       display   x000D        width  300px  x000D        height  200px  x000D        border  2px solid  000  x000D        x000D       x000D       js  display   x000D        display  none  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt h2 gt Example of using setInterval to trigger display of Div lt  h2 gt  x000D     lt p gt The first div will display after 10 seconds    lt  p gt  x000D     lt div id  container  gt  x000D       lt div id  div1  class  display  style  background-color  red   gt  x000D        div1 x000D       lt  div gt  x000D       lt div id  div2  class  display  style  background-color  green   gt  x000D        div2 x000D       lt  div gt  x000D       lt div id  div3  class  display  style  background-color  blue   gt  x000D        div3 x000D       lt  div gt  x000D       lt div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    EDIT   In response to your comment about the container div  just modify this     div    container     to this      div1   div2   div3

User · Answer

See InnerFade    lt script type  text javascript  gt        document  ready       function                 portfolio   innerfade               speed   slow               timeout  10000              type   sequence               containerheight   220px                       lt  script gt   lt ul id  portfolio  gt       lt li gt           lt a href  http   medienfreunde com deutsch referenzen kreation good guy  bad guy html  gt           lt img src  images ggbg gif  alt  Good Guy bad Guy    gt           lt  a gt       lt  li gt       lt li gt           lt a href  http   medienfreunde com deutsch referenzen kreation whizzkids html  gt           lt img src  images whizzkids gif  alt  Whizzkids    gt           lt  a gt       lt  li gt       lt li gt           lt a href  http   medienfreunde com deutsch referenzen printdesign koenigin mutter html  gt           lt img src  images km jpg  alt  K  nigin Mutter    gt           lt  a gt       lt  li gt       lt li gt           lt a href  http   medienfreunde com deutsch referenzen webdesign rt reprotechnik - hybride archivierung html  gt           lt img src  images rt arch jpg  alt  RT Hybride Archivierung    gt           lt  a gt       lt  li gt       lt li gt           lt a href  http   medienfreunde com deutsch referenzen kommunikation tuev sued gruppe html  gt           lt img src  images tuev jpg  alt  T  V S  D Gruppe    gt           lt  a gt       lt  li gt   lt  ul gt

User · Answer

Try this           document   ready function             window setTimeout  test    time in milliseconds                    function test               divid   hide

User · Answer

here is a jQuery plugin I came up with     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       You need to have a common classname for all the divs you wan to cycle  use it like this      div cycleme   cycle 5000

User · Answer

Heres a another take on this problem  using recursion and without using mutable variables  Also  im not using setInterval so theres no cleanup that has to be done    Having this HTML   lt section id  testimonials  gt       lt h2 gt My testimonial spinner lt  h2 gt       lt div class  testimonial  gt         lt p gt First content lt  p gt       lt  div gt       lt div class  testimonial  gt         lt p gt Second content lt  p gt       lt  div gt       lt div class  testimonial  gt          lt p gt Third content lt  p gt       lt  div gt   lt  section gt    Using ES2016  Here you call the function recursively and update the arguments      const testimonials       testimonials          children          filter  div testimonial       const showTestimonial   index   gt         testimonials hide          testimonials index   fadeIn         return index     testimonials length         showTestimonial 0          setTimeout      gt    showTestimonial index   1      10000         showTestimonial 0      id of the first element you want to show

User · Answer

Loop through divs every 10 seconds      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

[javascript] Show and hide divs at a specific time interval using jQuery

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to html

Examples related to timeout