折叠动画效果不起作用(反而溶解) - 小提琴里面

时间:2014-09-19 21:39:06

标签: javascript jquery html css animation

我希望隐藏小提琴中表格的最后两行,并在点击“查看更多”时以动画方式拉伸。我已经设法使用代码 - here's a fiddle

来实现这一目标

但动画正在消失而不是伸展。 我应该添加什么(最好用最少的代码)来获得这样的效果?

另外,HTML,CSS和Jquery方面,整个代码一般是这种情况下的最佳实践吗?

例如,我应该将.hidden类应用于tr吗?

我尝试在一个DIV中包装这两行并将.hidden类应用于它,但它不起作用。

CSS:

.clk {
    cursor: pointer;
}
.clk:hover {
    color:#903;
    text-decoration:underline;
}

table, tr, td, th {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
}

.hidden {
    display: none;
}

HTML:

  <table border="1">
    <col style="width:115px;" />
    <col style="width:125px;" />
    <col style="width:145px;" />
    <col style="width:125px;" />
    <col style="width:190px;" />
    <thead>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span class="clk">See More</span></td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
      </tr>
      <tr class="hidden">
        <td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
      </tr>
      <tr class="hidden">
        <td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
      </tr>
    </tbody>
  </table>

JS:

$(document).ready(function(){
    $('.clk').click(function(){
        $('.hidden').toggle(700)
    });
})

1 个答案:

答案 0 :(得分:1)

你不能slideToggle表格行,它不能很好地运作。我所做的是将每个td内容括在​​div中,并slideToggle对每个div进行处理。请注意,这应该有点慢,具体取决于单元格数和客户端计算机。

$('.clk').click(function(){
    $('.hidden').toggle(700) // Fade the rows
    $('.hidden td div').slideToggle(700) // Slide the contents
});

工作演示:http://jsfiddle.net/fzmuyp0u/