adamsbeaver
New Member
How can I animate a height adjustment after showing or hiding some divs within a table row? Basically after the user makes a selection in a radio group and hovers off of the row, the other radio options are hidden to condense the form. If they mouse back over that row, all of the radio options will appear again.Instead of just disappearing [and reappearing], I'd really like it if the table row slides up nicely to adjust to the new height. Here's my code:HERE'S A FIDDLE.\[code\]<tr id="range"> <td>Range</td> <td> <div class="formStrip"> <input name="radioRange" type="radio" id="relativeDates" /> <label for="relativeDates" class="rightSpacer">Relative Dates</label> <label for="relativeStart">Start</label> <input name="relativeStart" type="text" id="relativeStart" class="inputMarginFix" /> </div> <div class="formStrip"> <input name="radioRange" type="radio" id="specificDates" /> <label for="specificDates">Specific Dates</label> </div> </td></tr>\[/code\]\[code\]$("#formTable tr").mouseenter(function() { $(this).find("input[type='radio']").parent().show();}).mouseleave(function() { $(this).find("input[type='radio']").not(":checked").parent().hide();});\[/code\]