在表中添加时，转换在切换类中不起作用

transition not working in toggleclass while adding in table

本文关键字：不起作用 添加 转换      更新时间：2023-09-26
<style>
    table,
    th,
    td {
        border: 1px solid black;
    }
    .expanded {
        width: 200px
    }
</style>
<body>
    <button id="but">Button</button>
    <table>
        <colgroup>
            <col></col>
            <col></col>
        </colgroup>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>

<script>
    $('#but').click(function(){
       if($('table col').hasClass("expanded"))
          $('table col').toggleClass('expanded',1000,"easeOutSine");
       else
         $('table col').toggleClass('expanded',1000,"easeOutSine");
    });
</script>

在上面的示例中，添加切换类时转换不起作用 在表中的jquery中，请帮助我如何做到这一点.请不要更改 结构。

小提琴链接

你必须有一个设置的宽度开始，这里有一个例子：JSFiddle

table col {
    width: 75px; /* added this */
    -webkit-transition:width .8s ease;
    ...

或者，您可以使用jQuery的animate()来更改宽度，在这种情况下，您将删除css过渡：JSFiddle

if ($col.hasClass("expanded")) {
    $col.removeClass('expanded');
    $col.animate({"width": ""}, "slow");
} else {
    $('table col').addClass('expanded');
    $col.animate({"width": "200px"}, "slow");
}

至于你编辑使用toggleClass，它不起作用的部分原因是因为你没有来源jQueryUI...另一部分似乎是它不适用于 Col。如果我在桌子上添加一个宽度，它会起作用，看这里...或者在应该具有您想要的相同影响的td上，请参阅此处。

相关文章：