Slideshow Display: Unit

I use the following code to move around a line, but jQuery provides display: blockin-line when it should be table-row, breaking the style.

Fiddle: http://jsfiddle.net/7Ay3z/

I manually set it to table-rowafter its completion, but it's awful. How can I get around this?

<style>
table {
    margin: 25px;
}
tr {
    background-color: #c00;
    color: #fff;
    border: 1px solid #000;
    padding: 10px;
}
</style>
<table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td style="display:none;">1</td>
    </tr>
</table>

JQ:

$("tr").click(function(){
    var row = $(this);
    var visibleLength = row.find("td:visible").length;
    var hiddenLength = row.find("td:not(:visible)").length;
    var drillRow = $("<tr/>").addClass("drillDownRow");
    var drillColumn = $("<td/>").attr("colspan", visibleLength);
    var drillHidden = $("<td/>").attr("colspan", hiddenLength).css({display: "none"});

    drillColumn.html("test <b>2</b>... ok");

    drillRow.hide().append(drillColumn).append(drillHidden).insertAfter(row);
    drillRow.slideDown("slow",function() {$(this).css({display: "table-row"})});
});
+3
source share
2 answers

Try using the method animateinstead slideDown. You will need to make a slightly more manual definition of the effect that you want, but it will not present display:blockwhich will give you problems.

Quote from http://api.jquery.com/animate/ :

. , .slideDown() .fadeIn(), .animate() . , $('someElement'). hide(). animate ({height: '20px'}, 500), , .

+2
 $el.slideDown(function() {$(this).css('display', '');});
+1

All Articles