Given the following jsFiddle, how can I implement the same effect as me without creating on the stack?
http://jsfiddle.net/YWMcy/1/
I tried to do something like this:
jQuery(document).ready(function () { 'use strict'; (function ($) { function validateOptions(options) { if (typeof(options.delay) == typeof(0)) { $.error('Delay value must an integer.'); return false; } else if (options.delay < 0) { $.error('Delay value must be greater than zero.'); return false; } if (typeof(options.direction) == typeof('')) { $.error('Direction value must be a string.'); return false; } else if (!(options.direction in ['left', 'right', 'up', 'down'])) { $.error('Direction value must be "left", "right", "up", or "down".'); return false; } if (typeof(options.easing) == typeof('')) { $.error('Easing value must be a string.'); return false; } if (typeof(options.selector) == typeof('')) { $.error('Selector value must be a string.'); return false; } if (options.transition < 0) { $.error('Transition value must be greater than zero.'); return false; } return true; } var methods = { init: function (options) { return this.each(function () { var settings = { delay: 5000, direction: 'left', easing: 'swing', selector: '*', transition: 3000 }; if (options) { $.extend(settings, options); } $(this).css({ overflow: 'hidden', position: 'relative' }); var styles = { left: 0, position: 'absolute', top: 0 }; switch (settings.direction) { case 'left': styles.left = $(this).width() + 'px'; break; case 'right': styles.left = -$(this).width() + 'px'; break; case 'up': styles.top = $(this).height() + 'px'; break; case 'down': styles.top = -$(this).height() + 'px'; break; default: jQuery.error('Direction ' + settings.direction + ' is not valid for jQuery.fn.cycle'); break; } $(this).children(settings.selector).css(styles).first().css({ left: 0, top: 0 }); if ($(this).children(settings.selector).length > 1) { $(this).cycle('slide', settings); } }); }, slide: function (options) { return this.each(function () { var settings = { delay: 5000, direction: 'left', easing: 'swing', selector: '*', transition: 3000 }, animation, property, value; if (options) { $.extend(settings, options); } switch (settings.direction) { case 'left': animation = {left: '-=' + $(this).width()}; property = 'left'; value = $(this).width(); break; case 'right': animation = {left: '+=' + $(this).width()}; property = 'left'; value = -$(this).width(); break; case 'up': animation = {top: '-=' + $(this).height()}; property = 'top'; value = $(this).height(); break; case 'down': animation = {top: '+=' + $(this).height()}; property = 'top'; value = -$(this).height(); break; default: jQuery.error('Direction ' + settings.direction + ' is not valid for jQuery.fn.cycle'); break; } $(this).children(settings.selector + ':first-child').each(function () { $(this).delay(settings.delay); $(this).animate( animation, settings.transition, settings.easing, function () { $(this).css(property, value); } ); }); $(this).append($(this).children(settings.selector + ':first-child').detach()); $(this).children(settings.selector + ':first-child').each(function () { $(this).delay(settings.delay); $(this).animate( animation, settings.transition, settings.easing, function () { $(this).parent().cycle('slide', settings); } ); }); }); } }; jQuery.fn.cycle = function (method, options) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.fn.cycle'); } }; }(jQuery)); jQuery('.slider').cycle(); });
But the each() method does not take into account the nodes that are added during the loop.