zepto-slide-transition.min.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /* Zepto plugin : slide transition v1.0 */
  2. (function ($) {
  3. /* SlideDown */
  4. $.fn.slideDown = function (duration) {
  5. // get the element position to restore it then
  6. var position = this.css('position');
  7. // show element if it is hidden
  8. this.show();
  9. // place it so it displays as usually but hidden
  10. this.css({
  11. position: 'absolute',
  12. visibility: 'hidden'
  13. });
  14. // get naturally height, margin, padding
  15. var marginTop = this.css('margin-top');
  16. var marginBottom = this.css('margin-bottom');
  17. var paddingTop = this.css('padding-top');
  18. var paddingBottom = this.css('padding-bottom');
  19. var height = this.css('height');
  20. // set initial css for animation
  21. this.css({
  22. position: position,
  23. visibility: 'visible',
  24. overflow: 'hidden',
  25. height: 0,
  26. marginTop: 0,
  27. marginBottom: 0,
  28. paddingTop: 0,
  29. paddingBottom: 0
  30. });
  31. // animate to gotten height, margin and padding
  32. this.animate({
  33. height: height,
  34. marginTop: marginTop,
  35. marginBottom: marginBottom,
  36. paddingTop: paddingTop,
  37. paddingBottom: paddingBottom
  38. }, duration);
  39. };
  40. /* SlideUp */
  41. $.fn.slideUp = function (duration) {
  42. // active the function only if the element is visible
  43. if (this.height() > 0) {
  44. var target = this;
  45. // get the element position to restore it then
  46. var position = target.css('position');
  47. // get the element height, margin and padding to restore them then
  48. var height = target.css('height');
  49. var marginTop = target.css('margin-top');
  50. var marginBottom = target.css('margin-bottom');
  51. var paddingTop = target.css('padding-top');
  52. var paddingBottom = target.css('padding-bottom');
  53. // set initial css for animation
  54. this.css({
  55. visibility: 'visible',
  56. overflow: 'hidden',
  57. height: height,
  58. marginTop: marginTop,
  59. marginBottom: marginBottom,
  60. paddingTop: paddingTop,
  61. paddingBottom: paddingBottom
  62. });
  63. // animate element height, margin and padding to zero
  64. target.animate({
  65. height: 0,
  66. marginTop: 0,
  67. marginBottom: 0,
  68. paddingTop: 0,
  69. paddingBottom: 0
  70. },
  71. {
  72. // callback : restore the element position, height, margin and padding to original values
  73. duration: duration,
  74. queue: false,
  75. complete: function(){
  76. target.hide();
  77. target.css({
  78. visibility: 'visible',
  79. overflow: 'hidden',
  80. height: height,
  81. marginTop: marginTop,
  82. marginBottom: marginBottom,
  83. paddingTop: paddingTop,
  84. paddingBottom: paddingBottom
  85. });
  86. }
  87. });
  88. }
  89. };
  90. /* SlideToggle */
  91. $.fn.slideToggle = function (duration) {
  92. // if the element is hidden, slideDown !
  93. if (this.height() == 0) {
  94. this.slideDown(duration);
  95. }
  96. // if the element is visible, slideUp !
  97. else {
  98. this.slideUp(duration);
  99. }
  100. };
  101. })(Zepto);