Line 39: | Line 39: | ||
position:absolute; | position:absolute; | ||
background-color:blue; | background-color:blue; | ||
− | |||
} | } | ||
Line 46: | Line 45: | ||
<body> | <body> | ||
<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;; z-index:10;" id = "one" 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:purple;" id = "two" 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:black;" id = "three" class = "show"></div> | ||
Line 64: | Line 63: | ||
$("#forward").click(function () { | $("#forward").click(function () { | ||
n = n+1; | n = n+1; | ||
− | if (n | + | if (n == 6) { |
− | $("# | + | $("#four").animate({'left':'110%'}, 500); |
− | + | $("#one").animate({'left':'10%'}, 500); | |
− | $("# | + | |
− | + | ||
n = 2;} | n = 2;} | ||
else if (n==3) { | else if (n==3) { | ||
Line 78: | Line 75: | ||
else if (n==5) { | else if (n==5) { | ||
$('#four').animate({'right':'10%'}, 500); | $('#four').animate({'right':'10%'}, 500); | ||
− | $("#three").animate({'left':'110%'}, 500);} | + | $("#three").animate({'left':'110%'}, 500); |
+ | $("#one").css('left', '-110%');} | ||
}); | }); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
}); | }); | ||
</script> | </script> | ||
</html> | </html> |
Revision as of 18:18, 15 August 2016
>
<