Show and Hide Divs At a Specific Time Interval Using Jquery

Show and hide divs at a specific time interval using jQuery

Working Example here - add /edit to the URL to play with the code

You just need to use JavaScript setInterval function

$('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++;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!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>

jQuery - show/hide div in interval with different timings

InitialFlip();

function InitialFlip() {
    setTimeout(SecondFlip, 10000);
}

function SecondFlip() {
    $(".one, .two").toggle();

    setTimeout(function() {
        $(".one, .two").toggle();
        InitialFlip();
    }, 5000);
}

Show and hide based on time interval

Here is basic function Jsfiddle

var currentDiv = $("#a");var nextDiv, count = 1;var myInterval = setInterval(function() {  if (count == 5) {    clearInterval(myInterval);  } else {    count++;    currentDiv.hide();    currentDiv = currentDiv.next();    currentDiv.show();  }}, 2000);

#b,#c,#d,#e {  display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="a">1</div><div id="b">2</div><div id="c">3</div><div id="d">4</div><div id="e">5</div>

Show and hide divs at a specific time interval using jQuery but stop the last div

Assuming that your divs have the ids "div1" and "div2", and that "div1" starts out visible and "div2" starts out hidden, then you can hide the first and show the second after x milliseconds like this:

$("#div1").delay(10000).hide(0, function() {
    $("#div2").show();
});

You can use .fadeOut() and .fadeIn() or other animation methods instead of .hide() and .show() if you like.

Put the above code inside a document ready handler if the intention is for this to happen automatically, or in a click handler or whatever if it is in response to something the user does.

Demo: http://jsfiddle.net/s7NXz/

If you have more than two divs and you want to cycle through them exactly once you can do something like this:

var $divs = $("div").hide(),    // use an appropriate selector here
    current = 0;

$divs.eq(0).show();             // show the first

function showNext() {
    if (current < $divs.length - 1) { // if not past the end then
        $divs.eq(current).delay(2000).fadeOut('fast', function() {
            current++;
            $divs.eq(current).fadeIn('fast');
            showNext();
        });
    }
}
showNext();

Demo: http://jsfiddle.net/s7NXz/1/

show and hide divs using setInterval in jquery

  <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<input type='button' value="go" id="go"/>

<div id='div1' style='width:100px; height:100px; background:#000; display:none;' >

</div>
<div id='div2' style='width:100px; height:100px; background:#ccc; display:none;'></div> 
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script>

$(function() {
    $('#go').click(function(){
        showDiv1();
    });
});
function showDiv1(){
    $('#div1').show();
    setTimeout(function(){ $('#div1').hide(); showDiv2() },3000);
    }
function showDiv2(){
    $('#div2').show();
    setTimeout(function(){ $('#div2').hide(); showDiv1() },3000);
}


</script>

</body>
</html>

try this

How to show and hide previous and new item by time interval Jquery

A solution:

var current = 0;
$(".cards").hide();

setInterval(function () {
    var divs = $(".cards").hide();
    var i = 0;
    while (i < 8) {
        divs.eq(current).fadeIn("normal");
        console.log(divs.eq(current))
        if (current < divs.length) {
            i++;
            current = current + 1;
        } else  {
             i = 0;
             current = 0;
        }
    }

}, 10000);

Jquery Display Div with Interval

I would use single timeout function as your are hiding at regular intervals. There is one mistake in your code you need to pass the reference of function to setTimeout instead of passing the function call as a string.

Live Demo

window.setTimeout(mytimer,1000);
index = 1;
function mytimer()
{     
     $('#data' + (index++)).hide();
     if(index <= 4) window.setTimeout(mytimer,1000);
}

How to hide a div after some time period?

Here's a complete working example based on your testing. Compare it to what you have currently to figure out where you are going wrong.

<html> 
  <head> 
    <title>Untitled Document</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript"> 
      $(document).ready( function() {
        $('#deletesuccess').delay(1000).fadeOut();
      });
    </script>
  </head> 
  <body> 
    <div id=deletesuccess > hiiiiiiiiiii </div> 
  </body> 
</html>