55 | Download the plugin here : https://github.com/lwiesel/boilerplate/archive/master.zip 56 |
57 |
58 | or use the Bower Component available by taping:
59 | bower install jquery-fadethis
60 |
62 | Then, include the script after jQuery. Requires jQuery 1.4+.
63 |
64 | <script src="jquery.js"></script>
67 |
65 | <script src="jquery.fadethis.min.js"></script>
66 |
74 | Add this before the body closing tag:
75 | <script>$(window).fadeThis();</script>
76 | and add one of the following classes to the elements you want to target:
77 |
<div class="slide-left"></div>
84 | <div class="slide-right"></div>
95 | <div class="slide-top"></div>
106 | <div class="slide-bottom"></div>
117 | $(window).fadeThis({speed: 1000});
133 | <div class="slide-left"></div>
134 | $('.block').fadeThis({speed: 1000});
145 | <div class="block">
<div class="slide-left"></div>
</div>
146 | 151 | When defining elements options, the rule is First come, first served. The options set for a block doesn't override previous block options adressing the same elements, or page options. So if you use block options definition, don't use $(window).fadeThis() before! 152 |
153 |$(…).fadeThis(…);
165 | <div class="slide-right" data-plugin-options='{"speed":200, "distance":400}'></div>
166 | 171 | The options set by data attributes override any other options set per block. 172 |
173 |
179 | Note the position and order of the quotation mark for the data attribute.
180 | For some browsers, reverting this order may cause misunderstanding of the options.
181 |
199 | Animation speed in milliseconds. 200 |
201 |206 | Element distance to its emplacement, before animation. 207 |
208 |213 | Scroll offset, allowing to fire fading a little after or before the element appear. 214 |
215 |220 | Animation easing. 221 |
222 |223 | If you're using custom easing, you may need to also use jQuery Easing. 224 |
225 |
230 | Make element disappear again when scrolled out, and fade again when scrolled in.
231 | Set this to false if you want elements to stay on page after they appear once.
232 |
238 | Base class name for target elements. 239 |
240 |
245 | Function to call when the element come in viewport.
246 | This function is always called, even if reverse is set to false.
247 |
253 | Function to call when the element go out of the viewport.
254 | This function is always called, even if reverse is set to false.
255 |
262 | If you use jQuery 1.x, you're safe using jQuery.FadeThis on these browsers : 263 |
264 |285 | If you use jQuery 2.x, you're safe using jQuery.FadeThis on these browsers : 286 |
287 |
316 | | Source: | " + escapeText( source ) + " |
|---|
| Expected: | " + expected + " |
|---|---|
| Result: | " + actual + " |
| Diff: | " + QUnit.diff( expected, actual ) + " |
| Source: | " + escapeText( source ) + " |
| Result: | " + escapeText( actual ) + " |
|---|---|
| Source: | " + escapeText( source ) + " |