diff --git a/examples/index.html b/examples/index.html
index b49a053..527acd9 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html> 
-<html> 
-<head> 
+<!DOCTYPE html>
+<html>
+<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript" charset="utf-8"></script>
-  
-  <script src="../jquery.modal.min.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../jquery.modal.js" type="text/javascript" charset="utf-8"></script>
   <link rel="stylesheet" href="../jquery.modal.css" type="text/css" media="screen" />
-  
+
   <script src="highlight/highlight.pack.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8"> hljs.initHighlightingOnLoad(); </script>
   <link rel="stylesheet" href="highlight/github.css" type="text/css" media="screen" />
@@ -24,7 +24,7 @@
     table {width:100%;border-collapse:collapse;}
     td { border: 1px solid #eee; padding: 15px; }
     td pre { margin: 0; }
-    
+
     /* Example 2 (login form) */
     .login_form.modal {
       border-radius: 0;
@@ -32,7 +32,7 @@
       padding: 0;
       font-family: "Lucida Grande", Verdana, sans-serif;
     }
-    
+
     .login_form h3 {
       margin: 0;
       padding: 10px;
@@ -41,9 +41,9 @@
       background: -moz-linear-gradient(top, #2e5764, #1e3d47);
       background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1e3d47),color-stop(1, #2e5764));
     }
-    
+
     .login_form.modal p { padding: 20px 30px; border-bottom: 1px solid #ddd; margin: 0;
-      background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #eee),color-stop(1, #fff));  
+      background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #eee),color-stop(1, #fff));
       overflow: hidden;
     }
     .login_form.modal p:last-child { border: none; }
@@ -55,17 +55,17 @@
       border: 1px solid #ddd;
       width: 200px;
     }
-    
-    
+
+
     .part {
       display: none;
     }
-    
+
   </style>
   <title>jQuery Modal</title>
-</head> 
+</head>
 <body>
-    
+
 <h1>jQuery Modal</h1>
 <p><em>the simplest modal you ever did see.</em> &ndash; <a href="http://github.com/kylefox/jquery-modal">Code on GitHub &raquo;</a></p>
 <ul>
@@ -80,13 +80,13 @@ <h1>jQuery Modal</h1>
 
 
 
-    
+
 <hr />
 
 <h2>Example 1: Open &amp; Close with links</h2>
 <ol>
   <li>Embed modal HTML in document <small>(and hide it)</small></li>
-  <li>Create a link with <code>rel="modal:open"</code> and set the <code>href</code> attribute to the modal's DOM id.</li> 
+  <li>Create a link with <code>rel="modal:open"</code> and set the <code>href</code> attribute to the modal's DOM id.</li>
 </ol>
 <pre><code>&lt;!DOCTYPE html&gt;
 &lt;html&gt;
@@ -116,8 +116,8 @@ <h2>Example 1: Open &amp; Close with links</h2>
 <div class="modal" id="ex1" style="display:none;">
   <p>Thanks for clicking.  That felt good.  <br />Click <a href="#" rel="modal:close">close</a>, click the overlay, or press ESC</p>
 </div>
-  
-  
+
+
 <hr />
 
 <h2>Example 2: styled login form &amp; events</h2>
@@ -160,24 +160,24 @@ <h2>Example 4: AJAX</h2>
     $(html).appendTo('body').modal();
   });
 });</code></pre>
-  
+
 <pre><code>&lt;!-- AJAX response must be wrapped in the modal's root class. --&gt;<br/>&lt;div class=&quot;modal&quot;&gt;<br/>  &lt;p&gt;Second AJAX Example!&lt;/p&gt;<br/>&lt;/div&gt;</pre></code>
-  
-<p>If you want more spinner styles, check out <a href="http://ajaxload.info/">ajaxload.info</a>.</p>  
+
+<p>If you want more spinner styles, check out <a href="http://ajaxload.info/">ajaxload.info</a>.</p>
 
 <hr />
 
 <h2>Example 5: the un-closable window</h2>
 <p>
   This <a href="#ex5">example</a> demonstrates how to disable the default methods of closing the modal:
-  
+
 <pre><code> $("#sticky").modal({
   escapeClose: false,
   clickClose: false,
   showClose: false
 });</code></pre>
-  
-  
+
+
 </p>
 <div id="ex5" class="modal">
   <p>If you do this, be sure to provide the user with an alternate method of <a href="#" rel="modal:close">closing the window.</a></p>
@@ -201,14 +201,32 @@ <h2>Example 6: Multiple Modals</h2>
   <p>I'm the third modal. You get the idea.</p>
 </div>
 
+<hr />
+
+<h2>Example 7: Fading</h2>
+
+<p>This <a href="#ex7">example</a> shows how you can do a simple fade by specifying the <code>fadeDuration</code> option.</p>
+
+<pre><code> $("#fade").modal({
+  fadeDuration: 100
+});</code></pre>
+
+<div id="ex7" class="modal">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</div>
 
 <script type="text/javascript" charset="utf-8">
   $(function() {
-    
+
     function log_modal_event(event, modal) {
       if(typeof console != 'undefined' && console.log) console.log("[event] " + event.type);
     };
-    
+
     $(document).on($.modal.BEFORE_BLOCK, log_modal_event);
     $(document).on($.modal.BLOCK, log_modal_event);
     $(document).on($.modal.BEFORE_OPEN, log_modal_event);
@@ -218,20 +236,20 @@ <h2>Example 6: Multiple Modals</h2>
     $(document).on($.modal.AJAX_SEND, log_modal_event);
     $(document).on($.modal.AJAX_SUCCESS, log_modal_event);
     $(document).on($.modal.AJAX_COMPLETE, log_modal_event);
-    
+
     $('#more').click(function() {
       $(this).parent().after($(this).parent().next().clone());
       $.modal.resize();
       return false;
     });
-    
+
     $('#manual-ajax').click(function(event) {
       event.preventDefault();
       $.get(this.href, function(html) {
         $(html).appendTo('body').modal();
       });
     });
-    
+
     $('a[href="#ex5"]').click(function(event) {
       event.preventDefault();
       $(this).modal({
@@ -240,8 +258,15 @@ <h2>Example 6: Multiple Modals</h2>
         showClose: false
       });
     });
-    
+
+    $('a[href="#ex7"]').click(function(event) {
+      event.preventDefault();
+      $(this).modal({
+        fadeDuration: 1000
+      });
+    });
+
   });
 </script>
-</body> 
+</body>
 </html>
diff --git a/jquery.modal.js b/jquery.modal.js
index 938eeb7..aaf4504 100644
--- a/jquery.modal.js
+++ b/jquery.modal.js
@@ -11,6 +11,7 @@
     var remove, target;
     this.$body = $('body');
     this.options = $.extend({}, $.modal.defaults, options);
+    this.options.doFade = !isNaN(parseInt(this.options.fadeDuration, 10));
     if (el.is('a')) {
       target = el.attr('href');
       //Select element by id from href
@@ -65,6 +66,7 @@
     },
 
     block: function() {
+      var initialOpacity = this.options.doFade ? 0 : this.options.opacity;
       this.$elm.trigger($.modal.BEFORE_BLOCK, [this._ctx()]);
       this.blocker = $('<div class="jquery-modal blocker"></div>').css({
         top: 0, right: 0, bottom: 0, left: 0,
@@ -72,14 +74,24 @@
         position: "fixed",
         zIndex: this.options.zIndex,
         background: this.options.overlay,
-        opacity: this.options.opacity
+        opacity: initialOpacity
       });
+      console.log(initialOpacity);
       this.$body.append(this.blocker);
+      if(this.options.doFade) {
+        this.blocker.animate({opacity: this.options.opacity}, this.options.doFade);
+      }
       this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
     },
 
     unblock: function() {
-      this.blocker.remove();
+      if(this.options.doFade) {
+        this.blocker.fadeOut(this.options.fadeDuration, function() {
+          this.remove();
+        });
+      } else {
+        this.blocker.remove();
+      }
     },
 
     show: function() {
@@ -90,13 +102,24 @@
       }
       this.$elm.addClass(this.options.modalClass + ' current');
       this.center();
-      this.$elm.show().trigger($.modal.OPEN, [this._ctx()]);
+      if(this.options.doFade) {
+        this.$elm.fadeIn(this.options.fadeDuration);
+      } else {
+        this.$elm.show();
+      }
+      this.$elm.trigger($.modal.OPEN, [this._ctx()]);
     },
 
     hide: function() {
       this.$elm.trigger($.modal.BEFORE_CLOSE, [this._ctx()]);
       if (this.closeButton) this.closeButton.remove();
-      this.$elm.removeClass('current').hide();
+      this.$elm.removeClass('current')
+
+      if(this.options.doFade) {
+        this.$elm.fadeOut(this.options.fadeDuration);
+      } else {
+        this.$elm.hide();
+      }
       this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
     },
 
@@ -156,7 +179,8 @@
     modalClass: "modal",
     spinnerHtml: null,
     showSpinner: true,
-    showClose: true
+    showClose: true,
+    fadeDuration: null
   };
 
   // Event constants
