petersommerhoff
diff --git a/‎02.01.fading/css/style.css
+152 b/‎02.01.fading/css/style.css
+152
diff --git a/‎02.01.fading/index.html
+19 b/‎02.01.fading/index.html
+19
diff --git a/‎02.01.fading/js/script.js
+23 b/‎02.01.fading/js/script.js
+23
diff --git a/‎02.02.fading-pitfalls/css/style.css
+152 b/‎02.02.fading-pitfalls/css/style.css
+152
diff --git a/‎02.02.fading-pitfalls/index.html
+19 b/‎02.02.fading-pitfalls/index.html
+19
diff --git a/‎02.02.fading-pitfalls/js/script.js
+20 b/‎02.02.fading-pitfalls/js/script.js
+20
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
+  <script src="js/script.js"></script>
+  <link rel="stylesheet" href="css/style.css">
+  <title>The Complete jQuery Course - Course Code</title>
+</head>
+<body>
+  <div id="content">
+    <h1>The Complete jQuery Course - Project Structure</h1>
+
+    <div class="red-box">Red</div>
+    <div class="green-box">Green</div>
+    <div class="blue-box">Blue</div>
+    <div class="clear"></div>
+</body>
+</html>
@@ -0,0 +1,23 @@
+$(function () {
+  // Fade out element over 2000ms
+  $(".red-box").fadeOut(2000);
+
+  // Fade back in over 1000ms
+  $(".red-box").fadeIn(1000);
+
+  // Fade element to specific opacity (here 50%)
+  $(".blue-box").fadeTo(1000, 0.5);
+
+  // Note that the blue box animation starts right away, whereas the second
+  // red box animation waits until the first animation finished.
+  // This is because each element has its own animation queue which is
+  // executed one after the other. So while the red box is still "busy" with
+  // its first animation, the second animation waits in the queue.
+
+  // Fade element in or out, depending on current status
+  $(".blue-box").fadeToggle();
+  $(".blue-box").fadeToggle();
+
+  // Notice that fadeToggle fades back to the blue box's previous opacity,
+  // thus only back to 50% opacity.
+});
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
+  <script src="js/script.js"></script>
+  <link rel="stylesheet" href="css/style.css">
+  <title>The Complete jQuery Course - Course Code</title>
+</head>
+<body>
+  <div id="content">
+    <h1>The Complete jQuery Course - Project Structure</h1>
+
+    <div class="red-box">Red</div>
+    <div class="green-box">Green</div>
+    <div class="blue-box">Blue</div>
+    <div class="clear"></div>
+</body>
+</html>
@@ -0,0 +1,20 @@
+$(function () {
+  // Fade out element over 2000ms
+  $(".red-box").fadeOut(2000);
+
+  // Try to use fadeTo
+  $(".red-box").fadeTo(1000, 1.0);
+
+  // This doesn't work because fadeOut() will set display: none and fadeTo
+  // doesn't modify the display property. Thus, it's not able to make it
+  // reappear.
+
+  // Back to original state
+  $(".red-box").fadeIn(100);
+
+  // To keep red box in the layout, use only fadeTo
+  $(".red-box").fadeTo(2000, 0);
+
+  // Can now make it re-appear in the way we tried above
+  $(".red-box").fadeTo(1000, 1.0);
+});