protype 5

by Alexus fox

HTML

<div id="box-1" class="box"></div>
 <div id="box-2" class="box"></div><div id="box-3" class="box"></div>
<div class="belt"></div>
<div class="belt2"></div>
<div class="belt3"></div>
<div class="belt4"></div>
<div id="box-reset" class="box">Reset</div>

CSS

.body{
 background-color: black; 
  
}

.box {
  color: #FFF;
  background-color: grey;
  left:-20px;
  width: 600px;
  height: 100px;
  margin: 20px;
  padding: px;
}

.belt {
  color: #FFF;
  background-color:maroon;
  position:absolute;
  top:0px;
  left:620px;
  width: 600px;
  height: 80px;
  margin: 20px;
  padding: 10px;
}
.belt2 {
  color: #FFF;
  background-color:maroon;
  position:absolute;
  top:120px;
  left:620px;
  width: 600px;
  height: 80px;
  margin: 20px;
  padding: 10px;
}
.belt3 {
  color: #FFF;
  background-color:maroon;
  position:absolute;
  top:240px;
  left:620px;
  width: 600px;
  height: 80px;
  margin: 20px;
  padding: 10px;
}
.belt4 {
  color: #FFF;
  background-color:maroon;
  position:absolute;
  top:360px;
  left:620px;
  width: 600px;
  height: 80px;
  margin: 20px;
  padding: 10px;
}

JavaScript

box1triggered = false;
box2triggered = false;
box3triggered = false;

$('#box-1').click(function() {
	$(this).animate({
  	width: 0,
  });
  box1triggered = true;
});

$('#box-2').click(function() {
	if (box1triggered == true) {
    $(this).animate({
      width: 0,
    });
  }
  box2triggered = true;
});

$('#box-3').click(function() {
	if (box2triggered == true) {
    $(this).animate({
      width: 0,
    });
  }
  box3triggered = true;
});

$('#box-reset').click(function() {
	if (box1triggered == true && box1triggered == true && box1triggered == true) {
    $('.box').animate({
      width: 800,
    });
  }
  box1triggered = false;
  box2triggered = false;
  box3triggered = false;  
});