PageRenderTime 34ms CodeModel.GetById 10ms RepoModel.GetById 0ms app.codeStats 0ms

/files/anythingslider/1.8.6/jquery.anythingslider.fx.js

https://gitlab.com/Mirros/jsdelivr
JavaScript | 188 lines | 143 code | 15 blank | 30 comment | 72 complexity | e6889c7ee3c390b05994bacad74db72a MD5 | raw file
  1. /*
  2. * AnythingSlider Slide FX 1.6 for AnythingSlider v1.7.11+
  3. * By Rob Garrison (aka Mottie & Fudgey)
  4. * Dual licensed under the MIT and GPL licenses.
  5. */
  6. (function($) {
  7. $.fn.anythingSliderFx = function(effects, options){
  8. // variable sizes shouldn't matter - it's just to get an idea to get the elements out of view
  9. var wrap = $(this).closest('.anythingSlider'),
  10. sliderWidth = wrap.width(),
  11. sliderHeight = wrap.height(),
  12. getBaseFx = function(s){
  13. var size = s, size2;
  14. // allow for start and end sizes/dimensions
  15. if (s && typeof s === 'string' && s.indexOf(',') > 0) {
  16. s = s.split(',');
  17. size = $.trim(s[0]); size2 = $.trim(s[1]);
  18. }
  19. return {
  20. // 'name' : [{ inFx: {effects}, { outFx: {effects} }, selector: []]
  21. 'top' : [{ inFx: { top: 0 }, outFx: { top: '-' + (size || sliderHeight) } }],
  22. 'bottom' : [{ inFx: { top: 0 }, outFx: { top: (size || sliderHeight) } }],
  23. 'left' : [{ inFx: { left: 0 }, outFx: { left: '-' + (size || sliderWidth) } }],
  24. 'right' : [{ inFx: { left: 0 }, outFx: { left: (size || sliderWidth) } }],
  25. 'fade' : [{ inFx: { opacity: size || 1 }, outFx: { opacity: 0 } }],
  26. 'expand' : [{ inFx: { width: size2 || '100%', height: size2 || '100%', top: '0%', left: '0%' } , outFx: { width: (size || '10%'), height: (size || '10%'), top: '50%', left: '50%' } }],
  27. 'grow' : [{ inFx: { top: 0, fontSize: size || '16px', opacity : 1 }, outFx: { top: '-200px', fontSize: size2 || '80px', opacity: 0 } }],
  28. 'listLR' : [{ inFx: { left: 0, opacity: 1 }, outFx: [{ left: (size || sliderWidth), opacity: 0 }, { left: '-' + (size || sliderWidth), opacity: 0 }], selector: [':odd', ':even'] }],
  29. 'listRL' : [{ inFx: { left: 0, opacity: 1 }, outFx: [{ left: (size || sliderWidth), opacity: 0 }, { left: '-' + (size || sliderWidth), opacity: 0 }], selector: [':even', ':odd'] }],
  30. 'caption-Top' : [{ inFx: { top: 0, opacity: 0.8 }, outFx: { top: ( '-' + size || -50 ), opacity: 0 } }],
  31. 'caption-Right' : [{ inFx: { right: 0, opacity: 0.8 }, outFx: { right: ( '-' + size || -150 ), opacity: 0 } }],
  32. 'caption-Bottom' : [{ inFx: { bottom: 0, opacity: 0.8 }, outFx: { bottom: ( '-' + size || -50 ), opacity: 0 } }],
  33. 'caption-Left' : [{ inFx: { left: 0, opacity: 0.8 }, outFx: { left: ( '-' + size || -150 ), opacity: 0 } }]
  34. };
  35. };
  36. return this.each(function(){
  37. $(this).data('AnythingSlider').fx = effects; // store fx list to allow dynamic modification
  38. var defaults = $.extend({
  39. easing : 'swing', // Default FX easing
  40. timeIn : 400, // Default time for in FX animation
  41. timeOut : 350, // Default time for out FX animation - when using predefined FX, this number gets divided by 2
  42. stopRepeat : false, // stops repeating FX animation when clicking on the same navigation tab
  43. outFxBind : 'slide_init', // When outFx animations are called
  44. inFxBind : 'slide_complete', // When inFx animations are called
  45. dataAnimate: 'data-animate' // data attribute containing the animate.css class names to add for in and out fx
  46. }, options),
  47. baseFx = getBaseFx(), // get base FX with standard sizes
  48. // Animate FX
  49. animateFx = function(el, opt, isOut, time){
  50. if (el.length === 0 || typeof opt === 'undefined') { return; } // no fx
  51. var o = opt[0] || opt,
  52. s = o[1] || '',
  53. // time needs to be a number, not a string
  54. t = time || parseInt( ((s === '') ? o.duration : o[0].duration), 10);
  55. if (isOut) {
  56. // don't change caption position from absolute
  57. if (el.css('position') !== 'absolute') { el.css({ position : 'relative' }); }
  58. el.stop();
  59. // multiple selectors for out animation
  60. if (s !== ''){
  61. el.filter(opt[1][0]).animate(o[0], { queue : false, duration : t, easing : o[0].easing });
  62. el.filter(opt[1][1]).animate(s, { queue : true, duration : t, easing : o[0].easing });
  63. return;
  64. }
  65. }
  66. // animation for no extra selectors
  67. el.animate(o, { queue : true, duration : t, easing : o.easing });
  68. },
  69. // Extract FX
  70. getFx = function(opts, isOut){
  71. // example: '.textSlide h3' : [ 'top fade', '200px' '500', 'easeOutBounce' ],
  72. var tmp, bfx2,
  73. ex = (isOut) ? 'outFx' : 'inFx', // object key
  74. bfx = {}, // base effects
  75. time = (isOut) ? defaults.timeOut : defaults.timeIn, // default duration settings
  76. // split & process multiple built-in effects (e.g. 'top fade')
  77. fx = $.trim(opts[0].replace(/\s+/g,' ')).split(' ');
  78. // look for multiple selectors in the Out effects
  79. if (isOut && fx.length === 1 && baseFx.hasOwnProperty(fx) && typeof (baseFx[fx][0].selector) !== 'undefined') {
  80. bfx2 = baseFx[fx][0].outFx;
  81. // add time and easing to first set, the animation will use it for both
  82. bfx2[0].duration = opts[2] || defaults.timeOut;
  83. bfx2[0].easing = opts[3] || defaults.easing;
  84. return [bfx2, baseFx[fx][0].selector || [] ];
  85. }
  86. // combine base effects
  87. $.each(fx, function(i,f){
  88. // check if built-in effect exists
  89. if (baseFx.hasOwnProperty(f)) {
  90. var t = typeof opts[1] === 'undefined' || opts[1] === '',
  91. // if size option is defined, get new base fx
  92. tmp = (t) ? baseFx : getBaseFx(opts[1]);
  93. $.extend(true, bfx, tmp[f][0][ex]);
  94. t = opts[2] || bfx.duration || time; // user set time || built-in time || default time set above
  95. bfx.duration = (isOut) ? t/2 : t; // out animation time is 1/2 of in time for predefined fx only
  96. bfx.easing = isNaN(opts[3]) ? opts[3] || defaults.easing : opts[4] || defaults.easing;
  97. }
  98. });
  99. return [bfx];
  100. },
  101. base = $(this)
  102. // bind events for "OUT" effects - occur when leaving a page
  103. .bind(defaults.outFxBind, function(e, slider){
  104. if (defaults.stopRepeat && slider.$lastPage[0] === slider.$targetPage[0]) { return; }
  105. var el, elOut, time, page = slider.$lastPage.add( slider.$items.eq(slider.exactPage) ).add( slider.$targetPage ),
  106. FX = slider.fx; // allow dynamically added FX
  107. if (slider.exactPage === 0) { page = page.add( slider.$items.eq( slider.pages ) ); } // add last (non-cloned) page if on first
  108. if (slider.options.animationTime < defaults.timeOut) {
  109. time = slider.options.animationTime || defaults.timeOut;
  110. }
  111. page = page.find('*').andSelf(); // include the panel in the selectors
  112. for (el in FX) {
  113. if (el === 'outFx') {
  114. // process "out" custom effects
  115. for (elOut in FX.outFx) {
  116. // animate current/last slide, unless it's a clone, then effect the original
  117. if (page.filter(elOut).length) { animateFx( page.filter(elOut), FX.outFx[elOut], true); }
  118. }
  119. } else if (el !== 'inFx') {
  120. // Use built-in effects
  121. if ($.isArray(FX[el]) && page.filter(el).length) {
  122. animateFx( page.filter(el), getFx(FX[el],true), true, time);
  123. }
  124. }
  125. }
  126. el = page.filter('[' + defaults.dataAnimate + ']');
  127. if (el.length) {
  128. el.each(function(){
  129. FX = $(this).attr(defaults.dataAnimate).split(',');
  130. if (FX[0] !== '') {
  131. $(this)
  132. .removeClass(FX[0])
  133. .addClass(FX[1] || FX[0]);
  134. }
  135. });
  136. }
  137. })
  138. // bind events for "IN" effects - occurs on target page
  139. .bind(defaults.inFxBind, function(e, slider){
  140. if (defaults.stopRepeat && slider.$lastPage[0] === slider.$targetPage[0]) { return; }
  141. var el, elIn, page = slider.$currentPage.add( slider.$items.eq(slider.exactPage) ),
  142. FX = slider.fx; // allow dynamically added FX
  143. page = page.find('*').andSelf(); // include the panel in the selectors
  144. for (el in FX) {
  145. if (el === 'inFx') {
  146. // process "in" custom effects
  147. for (elIn in FX.inFx) {
  148. // animate current page
  149. if (page.filter(elIn).length) { animateFx( page.filter(elIn), FX.inFx[elIn], false); }
  150. }
  151. // Use built-in effects
  152. } else if (el !== 'outFx' && $.isArray(FX[el]) && page.filter(el).length) {
  153. animateFx( page.filter(el), getFx(FX[el],false), false);
  154. }
  155. }
  156. el = page.filter('[' + defaults.dataAnimate + ']');
  157. if (el.length) {
  158. el.each(function(){
  159. FX = $(this).attr(defaults.dataAnimate).split(',');
  160. if (FX[0] !== '') {
  161. $(this)
  162. .removeClass(FX[1] || FX[0])
  163. .addClass(FX[0]);
  164. }
  165. });
  166. }
  167. })
  168. .data('AnythingSlider');
  169. // call gotoPage to trigger intro animation
  170. $(window).load(function(){ base.gotoPage(base.currentPage, base.playing); });
  171. });
  172. };
  173. })(jQuery);