Difference between revisions of "Team:BostonU/HomeOne"

Line 46: Line 46:
 
<body>
 
<body>
 
<div id = "container">
 
<div id = "container">
−
<div style = "width:80%; height:80vh; background-color:green; z-index:10;" 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; z-index:10;" 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; z-index:8;" 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;" id = "four" class = "show"></div>
 
<div style = "width:80%; height:80vh; background-color:red;" id = "four" class = "show"></div>
 
</div>
 
</div>
Line 81: Line 81:
 
       $("#one").css('left', '-110%');
 
       $("#one").css('left', '-110%');
 
       $("#two").css('left', '-110%');}
 
       $("#two").css('left', '-110%');}
−
        });
+
    });
 +
 
 +
  $("#reverse").click(function () {
 +
      n = n-1;
 +
      if (n == 1) {
 +
      $("#four").animate({'left':'10%'}, 500);
 +
      $("#one").animate({'left':'110%'}, 500);
 +
      $("#three").css('left', '-110%');
 +
      n = 5;}   
 +
      else if (n==2) {
 +
      $('#one').animate({'left':'10%'}, 500);
 +
      $("#two").animate({'left':'110%'}, 500);} 
 +
      else if (n==3) {
 +
      $('#two').animate({'left':'10%'}, 500);
 +
      $("#three").animate({'left':'110%'}, 500);
 +
      $("#four").css('left', '-110%');}
 +
      else if (n==4) {
 +
      $('#three').animate({'left':'10%'}, 500);
 +
      $("#four").animate({'left':'110%'}, 500);
 +
      $("#two").css('left', '-110%');
 +
      $("#one").css('left', '-110%');}
 +
      else if (n==5) {
 +
      $('#four').animate({'left':'10%'}, 500);
 +
      $("#three").animate({'left':'110%'}, 500);
 +
      $("#one").css('left', '-110%');
 +
      $("#two").css('left', '-110%');}
 +
    });
 +
 
 
   });
 
   });
 
</script>
 
</script>
  
 
</html>
 
</html>

Revision as of 18:45, 15 August 2016

>
<