Difference between revisions of "Team:BostonU/HomeTwo"

Line 1: Line 1:
 +
{{BostonU_we_tryin}}
 
<html>
 
<html>
 
<style>
 
<style>
Line 6: Line 7:
 
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
  
 
#one {
 
#one {
Line 40: Line 43:
 
<div id = "container">
 
<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;" 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;" 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;" id = "four" class = "show"></div>
 
</div>
 
</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>
 
  
 +
<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 51: Line 54:
 
  $(document).ready(
 
  $(document).ready(
 
     function(){
 
     function(){
  var n = 2;
+
var n = 2;
 
   setInterval(function () {
 
   setInterval(function () {
       n = n+1;  
+
       n = n+1;  
       if (n==3) {
+
       if (n==2) {
 +
      $("#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==3) {
 +
      $("#two").css('left', '110%')
 +
      $('#two').animate({'left':'10%'}, 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;}  
        }, 3000);
+
    }, 3000);
 +
 
 
   });
 
   });
 
</script>
 
</script>
  
 
</html>
 
</html>

Revision as of 19:57, 15 August 2016