├── README.md └── jQuery.extendy.js /README.md: -------------------------------------------------------------------------------- 1 | # jQuery.extendy 2 | Common jQuery tasks re-packaged as independent utility methods. Works in tandem with jQuery’s core library. 3 | 4 | ## Installation 5 | Include the latest version of [jQuery](http://jquery.com/download) and `jQuery.extendy.js` in the `` of your HTML doc: 6 | ```html 7 | 8 | 9 | ``` 10 | 11 | ## How to Use 12 | Reference the intended method as you typically would using normal jQuery syntax. 13 | See the extended API ( below ) for a complete list of available options. 14 | 15 | **Normal** 16 | 17 | ```javascript 18 | var timeOut; 19 | 20 | $(window).resize(function() { 21 | 22 | clearTimeout(timeOut); 23 | 24 | timeOut = setTimeout(function() { 25 | 26 | // Execute After 500ms 27 | 28 | }, 500); 29 | 30 | }); 31 | ``` 32 | **Extendy** 33 | ```javascript 34 | $(window).resizeEnd(function() { 35 | 36 | // Execute After 500ms 37 | 38 | }, 500); 39 | ``` 40 | 41 | ## API Extended 42 | **.animateLeft( offset, duration, easing )** 43 | `Animate the scrollLeft position of matched elements` 44 | 45 | **.animateTop( offset, duration, easing )** 46 | `Animate the scrollTop position of matched elements` 47 | 48 | **.fadeToEach( delay, duration, opacity )** 49 | `Fade the opacity of each element after specified delay` 50 | 51 | **.fadeInEach( delay, duration )** 52 | `Show each element by fading in after specified delay` 53 | 54 | **.fadeOutEach( delay, duration )** 55 | `Hide each element by fading out after specified delay` 56 | 57 | **.toggleAttr( attr, name )** 58 | `Toggle the attribute of matched elements` 59 | 60 | **.toggleId( name )** 61 | `Toggle the id of matched elements` 62 | 63 | **.toggleHeight( start, end )** 64 | `Toggle the height of matched elements` 65 | 66 | **.toggleWidth( start, end )** 67 | `Toggle the width of matched elements` 68 | 69 | **.fadeToggleAttr( attr, name, duration )** 70 | `Fade toggle matched elements and attribute simultaneously` 71 | 72 | **.fadeToggleClass( name, duration )** 73 | `Fade toggle matched elements and class simultaneously` 74 | 75 | **.fadeToggleId( name, duration )** 76 | `Fade toggle matched elements and id simultaneously` 77 | 78 | **.slideFadeToggle( duration, easing, callback )** 79 | `Slide toggle and fade the opacity of matched elements` 80 | 81 | **.slideToggleAttr( attr, name, duration, easing )** 82 | `Slide toggle matched elements and attribute simultaneously` 83 | 84 | **.slideToggleClass( name, duration, easing )** 85 | `Slide toggle matched elements and class simultaneously` 86 | 87 | **.slideToggleId( name, duration, easing )** 88 | `Slide toggle matched elements and id simultaneously` 89 | 90 | **.slideToggleHeight( start, end, duration, easing )** 91 | `Slide toggle the height of matched elements` 92 | 93 | **.slideToggleWidth( start, end, duration, easing )** 94 | `Slide toggle the width of matched elements` 95 | 96 | **.showEach( delay )** 97 | `Show each element after specified delay ` 98 | 99 | **.hideEach( delay )** 100 | `Hide each element after specified delay` 101 | 102 | **.nextLoop( element )** 103 | `Get the next or first sibling of matched elements` 104 | 105 | **.prevLoop( element )** 106 | `Get the prev or last sibling of matched elements` 107 | 108 | **.scrollBottom( )** 109 | `Get the scroll position relative to the document bottom` 110 | 111 | **.scrollRight( )** 112 | `Get the scroll position relative to the document right` 113 | 114 | **.removeAll( name, attr )** 115 | `Remove class and attributes simultaneously` 116 | 117 | **.resizeEnd( fn, delay )** 118 | `Execute function after the resize event completes` 119 | 120 | **.duplicate( count )** 121 | `Clone multiple copies of matched elements` 122 | 123 | **.outerHTML( )** 124 | `Get the HTML fragment including matched elements` 125 | 126 | **.reverse( )** 127 | `Iterate all matched elements in reverse order` 128 | 129 | 130 | ## Release Notes 131 | **jQuery.extendy 1.0** 132 | – Initial Release 133 | **jQuery.extendy 1.0.1** 134 | – Added method for `slideFadeToggle` 135 | 136 | ## Feedback 137 | If you discover any issues or have questions regarding usage, please send a message to [code@nath.co](mailto:code@nath.co) or find me on GitHub [@nathco](https://github.com/nathco). -------------------------------------------------------------------------------- /jQuery.extendy.js: -------------------------------------------------------------------------------- 1 | // Plugin: jQuery.extendy 2 | // Source: github.com/nathco/jQuery.extendy 3 | // Author: Nathan Rutzky 4 | // Update: 1.0.1 5 | 6 | (function($) { 7 | 8 | jQuery.fn.extend({ 9 | 10 | animateLeft: function(offset, duration, easing) { 11 | 12 | return this.each(function() { 13 | 14 | $('html, body').stop().animate({ 15 | 16 | scrollLeft: $(this).offset().left + offset 17 | 18 | }, duration, easing); 19 | 20 | }); 21 | }, 22 | 23 | animateTop: function(offset, duration, easing) { 24 | 25 | return this.each(function() { 26 | 27 | $('html, body').stop().animate({ 28 | 29 | scrollTop: $(this).offset().top + offset 30 | 31 | }, duration, easing); 32 | 33 | }); 34 | }, 35 | 36 | fadeToEach: function(delay, duration, opacity) { 37 | 38 | return this.each(function(i) { 39 | 40 | $(this).delay(i * delay).fadeTo(duration, opacity); 41 | 42 | }); 43 | }, 44 | 45 | fadeInEach: function(delay, duration) { 46 | 47 | return this.each(function(i) { 48 | 49 | $(this).hide().delay(i * delay).fadeIn(duration); 50 | 51 | }); 52 | }, 53 | 54 | fadeOutEach: function(delay, duration) { 55 | 56 | return this.reverse().each(function(i) { 57 | 58 | $(this).delay(i * delay).fadeOut(duration); 59 | 60 | }); 61 | }, 62 | 63 | toggleAttr: function(attr, name) { 64 | 65 | return this.attr(attr, function(i, val) { 66 | 67 | return val == name ? null : name; 68 | 69 | }); 70 | }, 71 | 72 | toggleId: function(name) { 73 | 74 | return this.attr('id', function(i, val) { 75 | 76 | return val == name ? null : name; 77 | 78 | }); 79 | }, 80 | 81 | toggleHeight: function(start, end) { 82 | 83 | return this.each(function() { 84 | 85 | $(this).height($(this).height() == start ? end : start); 86 | 87 | }); 88 | }, 89 | 90 | toggleWidth: function(start, end) { 91 | 92 | return this.each(function() { 93 | 94 | $(this).width($(this).width() == start ? end : start); 95 | 96 | }); 97 | }, 98 | 99 | fadeToggleAttr: function(attr, name, duration) { 100 | 101 | return this.each(function() { 102 | 103 | $(this).stop().fadeToggle(duration).toggleAttr(attr, name); 104 | 105 | }); 106 | }, 107 | 108 | fadeToggleClass: function(name, duration) { 109 | 110 | return this.each(function() { 111 | 112 | $(this).stop().fadeToggle(duration).toggleClass(name); 113 | 114 | }); 115 | }, 116 | 117 | fadeToggleId: function(name, duration) { 118 | 119 | return this.each(function() { 120 | 121 | $(this).stop().fadeToggle(duration).toggleId(name); 122 | 123 | }); 124 | }, 125 | 126 | slideFadeToggle: function(duration, easing, callback) { 127 | 128 | return this.animate({ 129 | 130 | opacity: 'toggle', height: 'toggle' 131 | 132 | }, duration, easing, callback); 133 | }, 134 | 135 | slideToggleAttr: function(attr, name, duration, easing) { 136 | 137 | return this.each(function() { 138 | 139 | $(this).stop().slideToggle(duration, easing).toggleAttr(attr, name); 140 | 141 | }); 142 | }, 143 | 144 | slideToggleClass: function(name, duration, easing) { 145 | 146 | return this.each(function() { 147 | 148 | $(this).stop().slideToggle(duration, easing).toggleClass(name); 149 | 150 | }); 151 | }, 152 | 153 | slideToggleId: function(name, duration, easing) { 154 | 155 | return this.each(function() { 156 | 157 | $(this).stop().slideToggle(duration, easing).toggleId(name); 158 | 159 | }); 160 | }, 161 | 162 | slideToggleHeight: function(start, end, duration, easing) { 163 | 164 | return this.each(function() { 165 | 166 | $(this).stop().animate({ 167 | 168 | height: ($(this).height() == start) ? end : start 169 | 170 | }, duration, easing); 171 | 172 | }); 173 | }, 174 | 175 | slideToggleWidth: function(start, end, duration, easing) { 176 | 177 | return this.each(function() { 178 | 179 | $(this).stop().animate({ 180 | 181 | width: ($(this).width() == start) ? end : start 182 | 183 | }, duration, easing); 184 | 185 | }); 186 | }, 187 | 188 | showEach: function(delay) { 189 | 190 | return this.each(function(i) { 191 | 192 | $(this).hide().delay(i * delay).show(0); 193 | 194 | }); 195 | }, 196 | 197 | hideEach: function(delay) { 198 | 199 | return this.reverse().each(function(i) { 200 | 201 | $(this).delay(i * delay).hide(0); 202 | 203 | }); 204 | }, 205 | 206 | nextLoop: function(element) { 207 | 208 | return (this.next(element).length)? 209 | this.next(element): 210 | this.prevAll(element).last(); 211 | }, 212 | 213 | prevLoop: function(element) { 214 | 215 | return (this.prev(element).length)? 216 | this.prev(element): 217 | this.nextAll(element).last(); 218 | }, 219 | 220 | scrollBottom: function() { 221 | 222 | return $(document).height() - this.scrollTop() - this.height(); 223 | }, 224 | 225 | scrollRight: function() { 226 | 227 | return $(document).width() - this.scrollLeft() - this.width(); 228 | }, 229 | 230 | removeAll: function(name, attr) { 231 | 232 | return this.each(function() { 233 | 234 | $(this).removeClass(name).removeAttr(attr); 235 | 236 | }); 237 | }, 238 | 239 | resizeEnd: function(fn, delay) { 240 | 241 | var timeOut; 242 | 243 | return this.resize(function() { 244 | 245 | clearTimeout(timeOut); 246 | 247 | timeOut = setTimeout(function() { 248 | 249 | fn.call(this); 250 | 251 | }, delay); 252 | 253 | }); 254 | }, 255 | 256 | duplicate: function(count) { 257 | 258 | for (var x=[], i=0; i < count; i++) 259 | 260 | $.merge(x, this.clone(this).get()); 261 | 262 | return this.pushStack(x); 263 | }, 264 | 265 | outerHTML: function() { 266 | 267 | return (!this.length) ? this : (this[0].outerHTML); 268 | }, 269 | 270 | reverse: [].reverse 271 | 272 | }); 273 | 274 | })(jQuery); --------------------------------------------------------------------------------