Difference between revisions of "Team:BostonU/HomeTwo"

Line 26: Line 26:
 
left:-110%;
 
left:-110%;
 
}
 
}
 +
 +
#container {
 +
width:100%;
 +
height:80vh;
 +
position:absolute;
 +
background-color:blue;
 +
overflow:hidden;
 +
}
 +
 
</style>
 
</style>
  
 
<body>
 
<body>
<center>
+
<div id = "container">
 
<div style = "width:80%; height:80vh; background-color:green;" id = "one" class = "show"></div>
 
<div style = "width:80%; height:80vh; background-color:green;" id = "one" class = "show"></div>
 
<div style = "width:80%; height:80vh; background-color:purple; display:none;" id = "two" class = "show"></div>
 
<div style = "width:80%; height:80vh; background-color:purple; display:none;" id = "two" class = "show"></div>
 
<div style = "width:80%; height:80vh; background-color:black; display:none;" id = "three" class = "show"></div>
 
<div style = "width:80%; height:80vh; background-color:black; display:none;" id = "three" class = "show"></div>
 
<div style = "width:80%; height:80vh; background-color:red; display:none;" id = "four" class = "show"></div>
 
<div style = "width:80%; height:80vh; background-color:red; display:none;" id = "four" class = "show"></div>
</center>
+
</div>
 +
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  
 
</body>
 
</body>
Line 43: Line 53:
 
   var n = 2;
 
   var n = 2;
 
   setInterval(function () {
 
   setInterval(function () {
       n = n+1;  
+
       n = n+1;  
       if (n==2) {
+
       if (n==3) {
      $("#two").css('left', '110%')
+
      $('#two').animate({'left':'10%'}, 500);
+
      $("#one").animate({'left':'-110%'}, 500);}   
+
      else if (n==3) {
+
      $("#two").css('left', '110%')
+
 
       $('#two').animate({'left':'10%'}, 500);
 
       $('#two').animate({'left':'10%'}, 500);
       $("#one").animate({'left':'-110%'}, 500);}
+
       $("#one").animate({'left':'110%'}, 500);}
 
       else if (n==4) {
 
       else if (n==4) {
       $("#three").css('left', '110%');
+
       $("#three").css('left', '-110%');
 
       $('#three').animate({'left':'10%'}, 500);
 
       $('#three').animate({'left':'10%'}, 500);
       $("#two").animate({'left':'-110%'}, 500);}
+
       $("#two").animate({'left':'110%'}, 500);}
 
       else if (n==5) {
 
       else if (n==5) {
       $("#four").css('left', '110%');
+
       $("#four").css('left', '-110%');
 
       $('#four').animate({'left':'10%'}, 500);
 
       $('#four').animate({'left':'10%'}, 500);
       $("#three").animate({'left':'-110%'}, 500);}
+
       $("#three").animate({'left':'110%'}, 500);}
 
       else if (n == 6) {
 
       else if (n == 6) {
       $("#one").css('left', '110%');
+
       $("#one").css('left', '-110%');
       $("#four").animate({'left':'-110%'}, 500);
+
       $("#four").animate({'left':'110%'}, 500);
 
       $("#one").animate({'left':'10%'}, 500);
 
       $("#one").animate({'left':'10%'}, 500);
 
       n = 2;}  
 
       n = 2;}  

Revision as of 19:30, 15 August 2016