/* * anythingslider slide fx 1.5 for anythingslider v1.5.8+ * by rob garrison (aka mottie & fudgey) * dual licensed under the mit and gpl licenses. */ (function($) { $.fn.anythingsliderfx = function(options){ // variable sizes shouldn't matter - it's just to get an idea to get the elements out of view var wrap = $(this).closest('.anythingslider'), sliderwidth = wrap.width(), sliderheight = wrap.height(), getbasefx = function(size){ return { // 'name' : [{ infx: {effects}, { outfx: {effects} }, selector: []] 'top' : [{ infx: { top: 0 }, outfx: { top: '-' + (size || sliderheight) } }], 'bottom' : [{ infx: { bottom: 0 }, outfx: { bottom: (size || sliderheight) } }], 'left' : [{ infx: { left: 0 }, outfx: { left: '-' + (size || sliderwidth) } }], 'right' : [{ infx: { right: 0 }, outfx: { right: (size || sliderwidth) } }], 'fade' : [{ infx: { opacity: 1 }, outfx: { opacity: 0 } }], 'expand' : [{ infx: { width: '100%', top: '0%', left: '0%' } , outfx: { width: (size || '10%'), top: '50%', left: '50%' } }], 'listlr' : [{ infx: { left: 0, opacity: 1 }, outfx: [{ left: (size || sliderwidth), opacity: 0 }, { left: '-' + (size || sliderwidth), opacity: 0 }], selector: [':odd', ':even'] }], 'listrl' : [{ infx: { left: 0, opacity: 1 }, outfx: [{ left: (size || sliderwidth), opacity: 0 }, { left: '-' + (size || sliderwidth), opacity: 0 }], selector: [':even', ':odd'] }], 'caption-top' : [{ infx: { top: 125, opacity: 0.8 }, outfx: { top: ( '-' + size || -50 ), opacity: 0 } }], 'caption-right' : [{ infx: { right: '50%', opacity: 0.8 }, outfx: { right: ( '-' + size || -150 ), opacity: 0 } }], 'caption-bottom' : [{ infx: { bottom: 125, opacity: 0.8 }, outfx: { bottom: ( '-' + size || -50 ), opacity: 0 } }], 'caption-left' : [{ infx: { left: '50%', opacity: 0.8 }, outfx: { left: ( '-' + size || -150 ), opacity: 0 } }] }; }; return this.each(function(){ var basefx = getbasefx(), // get base fx with standard sizes defaults = { easing : 'swing', timein : 400, timeout : 350 }, // animate fx animatefx = function(el, opt, isout, time){ if (el.length === 0 || typeof opt === 'undefined') { return; } // no fx var o = opt[0] || opt, s = o[1] || '', // time needs to be a number, not a string t = time || parseint( ((s === '') ? o.duration : o[0].duration), 10); if (isout) { // don't change caption position from absolute if (el.css('position') !== 'absolute') { el.css({ position : 'relative' }); } el.stop(); // multiple selectors for out animation if (s !== ''){ el.filter(opt[1][0]).animate(o[0], { queue : false, duration : t, easing : o[0].easing }); el.filter(opt[1][1]).animate(s, { queue : true, duration : t, easing : o[0].easing }); return; } } // animation for no extra selectors el.animate(o, { queue : true, duration : t, easing : o.easing }); }, // extract fx from options getfx = function(opts, isout){ // example: '.textslide h3' : [ 'top fade', '200px' '500', 'easeoutbounce' ], var tmp, bfx2, ex = (isout) ? 'outfx' : 'infx', // object key bfx = {}, // base effects time = (isout) ? defaults.timeout : defaults.timein, // default duration settings // split & process multiple built-in effects (e.g. 'top fade') fx = $.trim(opts[0].replace(/\s+/g,' ')).split(' '); // look for multiple selectors in the out effects if (isout && fx.length === 1 && basefx.hasownproperty(fx) && typeof (basefx[fx][0].selector) !== 'undefined') { bfx2 = basefx[fx][0].outfx; // add time and easing to first set, the animation will use it for both bfx2[0].duration = opts[2] || defaults.timeout; bfx2[0].easing = opts[3] || defaults.easing; return [bfx2, basefx[fx][0].selector || [] ]; } // combine base effects $.each(fx, function(i,f){ // check if built-in effect exists if (basefx.hasownproperty(f)) { var t = typeof opts[1] === 'undefined', n = (f === 'fade') ? 1 : 2; // if 2nd param defined, but it's not a size ('200px'), then use it as time (for fade fx) // if size option is defined, get new base fx tmp = (t) ? basefx : getbasefx(opts[1]); $.extend(true, bfx, tmp[f][0][ex]); t = opts[n] || bfx.duration || time; // user set time || built-in time || default time set above bfx.duration = (isout) ? t/2 : t; // out animation time is 1/2 of in time for predefined fx only bfx.easing = opts[n+1] || defaults.easing; } }); return [bfx]; }; $(this) // bind events for "out" effects - occur when leaving a page .bind('slide_init', function(e, slider){ var el, elout, time, page = slider.$lastpage.add( slider.$items.eq(slider.exactpage) ).add( slider.$targetpage ); if (slider.exactpage === 0) { page = page.add( slider.$items.eq( slider.pages ) ); } // add last (non-cloned) page if on first if (slider.options.animationtime < defaults.timeout) { time = slider.options.animationtime || 1; // if time = zero, make it 1... (0 || 1 === 1) // true ) } page = page.find('*').andself(); // include the panel in the selectors for (el in options) { if (el === 'outfx') { // process "out" custom effects for (elout in options.outfx) { // animate current/last slide, unless it's a clone, then effect the original if (page.filter(elout).length) { animatefx( page.filter(elout), options.outfx[elout], true); } } } else if (el !== 'infx') { // use built-in effects if ($.isarray(options[el]) && page.filter(el).length) { animatefx( page.filter(el), getfx(options[el],true), true, time); } } } }) // bind events for "in" effects - occurs on target page .bind('slide_complete', function(e, slider){ var el, elin, page = slider.$currentpage.add( slider.$items.eq(slider.exactpage) ); page = page.find('*').andself(); // include the panel in the selectors for (el in options) { if (el === 'infx') { // process "in" custom effects for (elin in options.infx) { // animate current page if (page.filter(elin).length) { animatefx( page.filter(elin), options.infx[elin], false); } } // use built-in effects } else if (el !== 'outfx' && $.isarray(options[el]) && page.filter(el).length) { animatefx( page.filter(el), getfx(options[el],false), false); } } }); }); }; })(jquery);