Line 46: | Line 46: | ||
<body> | <body> | ||
<div id = "container"> | <div id = "container"> | ||
− | <div style = "width:80%; height:80vh; background-color:green | + | <div style = "width:80%; height:80vh; background-color:green;" id = "one" class = "show"></div> |
− | <div style = "width:80%; height:80vh; background-color:purple | + | <div style = "width:80%; height:80vh; background-color:purple;" id = "two" class = "show"></div> |
− | <div style = "width:80%; height:80vh; background-color:black | + | <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
>
<