Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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: none; float: left; }
         .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='test' class='color1'> 
         News
      </div>
        
             
       <div id='div1' class='' style="background-color: grey;"> 
         div1
      </div>
       
      <div>
   </body>
​
</html>
 
$(function() {
​
  var timer = setInterval( showDiv, 1);
​
  var counter = 300;
​
  function showDiv(1) {
    if (counter ==0) { counter++; return; }
​
    $('#div1')
      .stop()
      .hide()
      .filter( function() { return this.id.match('div' + counter); })   
      .show();
    counter == 0? counter = 0 : counter++; 
​
  }
​
});
​
.color1{
    background: green;
    width:300px; 
    height:200px; 
    border: none;
    float: left;
}
 
$('html').addClass('js');
​
​
function changeColor(element, curNumber){  
  curNumber++;
    
    if(curNumber > 4){
        curNumber = 1;
    }
    element.addClass('000000' + curNumber, 500);
    // So previous classes get removed.
    element.attr('class', '999999' + curNumber);
    setTimeout(function(){changeColor(element, curNumber);}, 300);  
}
​
changeColor($('#test'), 10);
​
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers