How to Use slideDown (or show) function on a table row?

Question

I\'m trying to add a row to a table and have that row slide into view, however the slidedown function seems to be adding a display:block style to the table row which messes

Answer 1

The plug offered by Vinny is really close, but I found and fixed a couple of small issues.

1. It greedily targeted td elements beyond just the children of the row being hidden. This would have been kind of ok if it had then sought out those children when showing the row. While it got close, they all ended up with "display: none" on them, rendering them hidden.
2. It didn't target child th elements at all.

3. For table cells with lots of content (like a nested table with lots of rows), calling slideRow('up'), regardless of the slideSpeed value provided, it'd collapse the view of the row as soon as the padding animation was done. I fixed it so the padding animation doesn't trigger until the slideUp() method on the wrapping is done.

   (function($){
       var sR = {
           defaults: {
               slideSpeed: 400
             , easing: false
             , callback: false
           }
         , thisCallArgs:{
               slideSpeed: 400
             , easing: false
             , callback: false
           }
         , methods:{
               up: function(arg1, arg2, arg3){
                   if(typeof arg1 == 'object'){
                       for(p in arg1){
                           sR.thisCallArgs.eval(p) = arg1[p];
                       }
                   }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
                       sR.thisCallArgs.slideSpeed = arg1;
                   }else{
                       sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                   }
   
                   if(typeof arg2 == 'string'){
                       sR.thisCallArgs.easing = arg2;
                   }else if(typeof arg2 == 'function'){
                       sR.thisCallArgs.callback = arg2;
                   }else if(typeof arg2 == 'undefined'){
                       sR.thisCallArgs.easing = sR.defaults.easing;    
                   }
                   if(typeof arg3 == 'function'){
                       sR.thisCallArgs.callback = arg3;
                   }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                       sR.thisCallArgs.callback = sR.defaults.callback;    
                   }
                   var $cells = $(this).children('td, th');
                   $cells.wrapInner('
   ');
                   var currentPadding = $cells.css('padding');
                   $cellContentWrappers = $(this).find('.slideRowUp');
                   $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function(){
                       $(this).parent().animate({ paddingTop: '0px', paddingBottom: '0px' }, {
                           complete: function(){
                               $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                               $(this).parent().css({ 'display': 'none' });
                               $(this).css({ 'padding': currentPadding });
                           }
                       });
                   });
                   var wait = setInterval(function(){
                       if($cellContentWrappers.is(':animated') === false){
                           clearInterval(wait);
                           if(typeof sR.thisCallArgs.callback == 'function'){
                               sR.thisCallArgs.callback.call(this);
                           }
                       }
                   }, 100);                                                                                                    
                   return $(this);
               }
             , down: function (arg1, arg2, arg3){
                   if(typeof arg1 == 'object'){
                       for(p in arg1){
                           sR.thisCallArgs.eval(p) = arg1[p];
                       }
                   }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
                       sR.thisCallArgs.slideSpeed = arg1;
                   }else{
                       sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                   }
   
                   if(typeof arg2 == 'string'){
                       sR.thisCallArgs.easing = arg2;
                   }else if(typeof arg2 == 'function'){
                       sR.thisCallArgs.callback = arg2;
                   }else if(typeof arg2 == 'undefined'){
                       sR.thisCallArgs.easing = sR.defaults.easing;    
                   }
                   if(typeof arg3 == 'function'){
                       sR.thisCallArgs.callback = arg3;
                   }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                       sR.thisCallArgs.callback = sR.defaults.callback;    
                   }
                   var $cells = $(this).children('td, th');
                   $cells.wrapInner('
   ');
                   $cellContentWrappers = $cells.find('.slideRowDown');
                   $(this).show();
                   $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
   
                   var wait = setInterval(function(){
                       if($cellContentWrappers.is(':animated') === false){
                           clearInterval(wait);
                           if(typeof sR.thisCallArgs.callback == 'function'){
                               sR.thisCallArgs.callback.call(this);
                           }
                       }
                   }, 100);
                   return $(this);
               }
           }
       };
   
       $.fn.slideRow = function(method, arg1, arg2, arg3){
           if(typeof method != 'undefined'){
               if(sR.methods[method]){
                   return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
               }
           }
       };
   })(jQuery);