the first part of lab_4, five effects using jquerry

5_effects/code.html

+<script src = "jquery-3.1.1.js"></script>
+<script src = "code.js"></script>
+
+<div id="dropDown">Click to slide down the option buttons</div>
+<button id = "Move">Move the square!</button>
+<button id = "Hide">Hide the square!</button>
+<button id = "Show">Show the square!</button>
+<button id = "fadeIn">Fade in and out two more squares!</button><br><br><br>
+
+
+<style>
+ #dropDown {
+    padding: 5px;
+    text-align: center;
+    background-color: #e5eecc;
+    border: solid 1px #c3c3c3;
+}
+
+#Move {
+    padding: 20px;
+    background-color: #e5eecc;
+    display: none;
+}
+#Hide {
+    padding: 20px;
+    background-color: #e5eecc;
+    display: none;
+}
+#Show {
+    padding: 20px;
+    background-color: #e5eecc;
+    display: none;
+}
+#fadeIn {
+    padding: 20px;
+    background-color: #e5eecc;
+    display: none;
+}
+</style>
+
+<div id = "Styles" style="background:red;height:80px;width:80px;position:absolute;"><br><br><br><br><br>
+<div id="Styles_1" style="width:80px;height:80px;display:none;background-color:blue;"></div><br>
+<div id="Styles_2" style="width:80px;height:80px;display:none;background-color:purple;"></div><br>

5_effects/code.js

+
+//When the document is uploaded.
+$(document).ready(function(){
+
+  $("#dropDown").click(function(){
+    $("#Move").slideToggle("slow");
+    $("#Hide").slideToggle("slow");
+    $("#Show").slideToggle("slow");
+    $("#fadeIn").slideToggle("slow");
+  });
+
+  //Alligning the square so it would be 250px from the left.
+  $("#Move").click(function(){
+    $("#Styles").animate({
+      left : '250px'
+    });
+  });
+
+//Hiding the square.
+$("#Hide").click(function(){
+  $("#Styles").hide();
+});
+
+//Showing the hidden square
+$("#Show").click(function(){
+  $("#Styles").show();
+});
+
+//Switching two more square in and out
+$("#fadeIn").click(function(){
+  $("#Styles_1").fadeToggle(1000);
+  $("#Styles_2").fadeToggle(1000);
+});
+
+});