[v1.1] bugfix: initial fade-in works as expected. update readme

okfocus · Apr 28, 2012 · cbf8e23 · cbf8e23
1 parent eeff156
commit cbf8e23
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 78 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+*.lock
diff --git a/readme.md b/readme.md
@@ -0,0 +1,85 @@
+# okhover by OKFocus
+
+OKHover is a jQuery plugin that makes it easy to reproduce the tiled background effect seen on the [OKFocus website](http://okfoc.us "OKFocus"). It uses HTML5 data attributes and is designed to be simple yet highly customizable.
+
+### Requirements
+
+The only real technical requirement besides jQuery itself, is declaring the HTML5 doctype for your web application. This is achieved by making sure the first line of your HTML is `<!doctype html>`. This ensures that using data attributes will be considered valid markup by browsers.
+
+### Usage
+
+For a simple example, consider this snippet of code:
+
+``` html
+<ul>
+  <li data-okimage='http://example.com/path/to/an/image.gif'>
+    <a href='#'>I'm a link</a>
+  </li>
+</ul>
+```
+
+The above will have no visible effect. To achieve the hovering effect, you'll have to include this javascript after including the OKHover source.
+
+``` js
+$(function(){
+    $('li').okhover();  
+}):
+```
+
+When you hover on an `<li>`, you'll now see the okhover effect in action. The data attribute `data-image` is a reference to the image that will appear tiled in the background.
+
+### Options
+
+The following options are available to you:
+
+<table>
+  <tbody>
+    <tr>
+      <th>option</th>
+      <th>description</th>
+      <th>default</th>
+    </tr>
+    <tr>
+      <td>fadeIn</td>
+      <td>A boolean that controls if the background image will fade in</td>
+      <td>false</td>
+    </tr>
+    <tr>
+      <td>fadeOut</td>
+      <td>A boolean that controls if the background image will fade out</td>
+      <td>false</td>
+    </tr>
+    <tr>
+      <td>fadeInDuration</td>
+      <td>A number that controls how long the fade-in will be (in milliseconds)</td>
+      <td>400 milliseconds</td>
+    </tr>
+    <tr>
+      <td>z-index</td>
+      <td>A number that controls the z-index of the background div</td>
+      <td>-1</td>
+    </tr>
+  </tbody>
+</table>
+
+Here's an example with a lot of options:
+
+``` js
+$(function(){
+    $('div').okhover({
+        fadeIn: true,
+        fadeOut: true,
+        fadeInDuration: 2000,
+        zIndex: 420
+    });  
+});
+```
+
+### Run Tests
+
+OKFocus tests JavaScript with Jasmine. Run tests:
+
+``` sh
+$ bundle install
+$ rake jasmine
+```
diff --git a/readme.textile b/readme.textile
diff --git a/src/okhover-1.0.3.min.js b/src/okhover-1.0.3.min.js
diff --git a/src/okhover-1.0.3.js → src/okhover.js b/src/okhover-1.0.3.js → src/okhover.js
@@ -1,16 +1,16 @@
+/*
+ * OKHover by OKFocus v1.1
+ * http://okfoc.us 
+ *
+ * Copyright 2012, OKFocus
+ * Licensed under the MIT license.
+ *
+ */
+
 (function($){
 
     $(function(){
-        $('body').append('<div id="ok-bg"></div>');
-        $('#ok-bg').css({
-            width : '100%',
-            height : '100%',
-            background : 'scroll 150% 150% repeat',
-            zIndex : -1,
-            position : 'fixed',
-            top : 0,
-            left : 0
-        });
+        $('body').append('<div id="ok-bg" style="width:100%;height:100%;background:scroll 150% 150% repeat;z-index:-1;position:fixed;top:0;left:0;"></div>');
     });
 
     $.okhover = function(el, options){
@@ -46,9 +46,10 @@
                         background.css('backgroundPosition', e.pageX + 'px ' + e.pageY + 'px');
                     });
 
-                    background.css('backgroundImage', 'url(' + $(this).attr('data-okimage') + ')').show();
+                    background.css('backgroundImage', 'url(' + $(this).attr('data-okimage') + ')');
 
-                    if (base.options.fadeIn) background.stop().fadeTo(base.options.fadeInDuration, 1);
+                    if (base.options.fadeIn) background.css('opacity', 0).stop().fadeTo(base.options.fadeInDuration, 1);
+                    else background.show();
                 },
                 mouseout: function(){
                     if (base.options.fadeOut) background.stop().fadeTo(base.options.fadeOutDuration, 0, function() { $(this).css('backgroundImage', '').hide() });
@@ -82,4 +83,4 @@
         });
     };
 
-})(jQuery);
+})(jQuery);
diff --git a/src/okhover.min.js b/src/okhover.min.js