slideDown, slideUp not working in jQuery

问题

Hi Friends slideDown and slideUp function are not working with my code. It appears the hidden row without slideDown effect PLease help guys you can chekc my code below or see fiddle here

HTML

<table>
<tr>
    <td colspan="2"><p>Logistics</p>
      <select name=" " >
        <option>one</option>
        <option>two</option>
        <option>three</option>
        <option>four</option>
        <option>Others</option>
      </select>
    </td>
  </tr>
  <tr>
    <td width="80%" colspan="2"><textarea name=" 5" rows="2" id=" 5" onblur="if (this.value=='') this.value = this.defaultValue" onfocus="if (this.value==this.defaultValue) this.value = ''">Others Details</textarea>
      </td>
  </tr>
</table>

SCRIPT

$('tr').has('textarea').hide();
$('select').on('change',function(){
    if($(this).val()=='Others')
    {
        //$(this).next('tr td').has('textarea').slideDown(200);
        $(this).parent('td').parent('tr').next('tr').slideDown(200);
        //alert('other')
        }
    else
    {
        //$(this).next('tr td').has('textarea').slideDown(200);
        $(this).parent('td').parent('tr').next('tr').slideUp(200);
        //alert('other')
        }
    })

回答1:

Check this demo jsFiddle

JQuery

$('tr').not(':first').children('td').wrapInner('<div>');
$('select').on('change',function(){
    if($(this).val()=='Others')
    {
        $('td > div').slideDown(2000, function() {
            $(this).parent().slideDown(2000);
        });
    }
    else
    {
        $('td > div').slideUp(1000, function() {
            $(this).parent().slideUp();
        });
    }
});

回答2:

You can not slide table rows, as you can't manipulate the height of them. jQuery's animation relies upon the element having height and width.

Inline elements do not have these dimensions set or settable, so animations must make them block-level elements.It's probably better to just use regular, non-animated, hide and show for such elements.

You can also use fadeIn and fadeOut. Demo

来源：https://stackoverflow.com/questions/22555796/slidedown-slideup-not-working-in-jquery

标签

jquery

slidedown

slideup