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>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/1.0.1/q.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <button id='start' class='start'>Start</button> 
  
<div class="step1 later">
  <div class='red later'>Show first</div>
  <div class='aqua later'>Show later</div>
</div>
  
    
<div class="step2 later">
  <div class='green later'>Show together</div>
  <div class='yellow later'>Show together</div>
</div>
  
  <div class="notification"></div>
​
</body>
</html>
 
.step1, .step2 {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
}
​
.start {
  position: absolute;
  right: 0;
  top: 0;
}
​
.later {
  display: none;
}
​
.notification {
  position: absolute;
  top: 160px;
  left:0;
}
​
.red {
  background-color: red;
  position: absolute;
  top: 0;
  left:0;
  
}
​
.aqua {
  background-color: aqua;
  position: absolute;
  top: 40px;
  left:0;
 
}
​
.green {
  background-color: green;
  position: absolute;
  top: 80px;
  left:0;  
}
​
.yellow {
  position: absolute;
  background-color: yellow;
  top: 120px;
  left:0;  
}
 
$(function () {
  var currentStep = 1,
      handlers = {};
     
  
  
  $('#start').click(function() {
    for(var i = 0; i < 2; i++) {
      console.log(currentStep);
      showStep(currentStep + i);
    }     
  });
  
  function showStep(step) {
    var name = 'step' + step;
    $('.' + name).show();
   
    handlers[name]();
  }
  
  
  handlers.step1 = function() {
    Q().then(function() {
       $('.notification').html('Step1 started');
    })
    .delay(2000)
    .then(function() {
       showElem('red');     
    })
    .delay(2000)
    .then(function() {
       showElem('aqua');     
    });
  };
  
    handlers.step2 = function() {
    Q().then(function() {
       $('.notification').append('Step2 started');
    })
    .delay(2000)
    .then(function() {
       showElem('green'); 
       showElem('yellow'); 
    });    
  };
  
  function showElem(classSelector) {
    $('.' + classSelector).fadeIn(100);
  }
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers