如何使用幻灯片应用平滑的显示/隐藏效果在jQuery上切换

How to apply smooth show/hide effect with slideToggle on jQuery

本文关键字：jQuery 隐藏 幻灯片 何使用 应用 平滑 显示      更新时间：2023-09-26

我正在尝试用slideToggle显示隐藏内容，它被唤醒了，但我的桌子上没有得到流畅的动画效果。

我已经尝试了这两个代码，但现在得到了适当的动画效果：

  1. $('.more').slideToggle('fast');
  2. $('.more').stop().slideToggle(500);

知道怎么做吗？

谢谢。

这是我的jQuery代码工作： 

$('#more').click(function () {
    $(this).text('See less');
    if ($('.more').is(':visible')) {
        $(this).text('See more');
    } else {
        $(this).text('See less');
    }
    //$('.more').slideToggle('fast');
    $('.more').stop().slideToggle(500);
    return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<a href="#" id="more">More about us</a>
<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Address</th>
            <th>Rooms</th>
            <th>SQM</th>
            <th>Floor</th>
            <th>Parking</th>
            <th class="price">Price</th>
            <th>PpM</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-name="Date">5/12/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">1</td>
            <td data-name="Parking">1</td>
            <td data-name="Price">1,410,000</td>
            <td data-name="PpM">40,286</td>
        </tr>
        <tr class="active">
            <td data-name="Date">13/05/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">2</td>
            <td data-name="Parking">1</td>
            <td data-name="Price">13/05/14</td>
            <td data-name="PpM">44,000</td>
        </tr>
        <tr class="more">
            <td data-name="Date">18/08/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">6</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,600,000</td>
            <td data-name="PpM">45,714</td>
        </tr>
        <tr class="more">
            <td data-name="Date">14/09/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">4</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,375,000</td>
            <td data-name="PpM">39,286</td>
        </tr>
        <tr class="more">
            <td data-name="Date">25/01/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">2</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,680,000</td>
            <td data-name="PpM">28,966</td>
        </tr>
    </tbody>
</table>

只需更改它：

$('.more').stop().slideToggle(10);// to show effect faster use small value.


$('#more').click(function () {
    $(this).text('See less');
    if ($('.more').is(':visible')) {
        $(this).text('See more');
    } else {
        $(this).text('See less');
    }
    //$('.more').slideToggle('fast');
    $('.more').stop().slideToggle(10);
    return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="more">More about us</a>
<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Address</th>
            <th>Rooms</th>
            <th>SQM</th>
            <th>Floor</th>
            <th>Parking</th>
            <th class="price">Price</th>
            <th>PpM</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-name="Date">5/12/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">1</td>
            <td data-name="Parking">1</td>
            <td data-name="Price">1,410,000</td>
            <td data-name="PpM">40,286</td>
        </tr>
        <tr class="active">
            <td data-name="Date">13/05/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">2</td>
            <td data-name="Parking">1</td>
            <td data-name="Price">13/05/14</td>
            <td data-name="PpM">44,000</td>
        </tr>
        <tr class="more">
            <td data-name="Date">18/08/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">6</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,600,000</td>
            <td data-name="PpM">45,714</td>
        </tr>
        <tr class="more">
            <td data-name="Date">14/09/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">4</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,375,000</td>
            <td data-name="PpM">39,286</td>
        </tr>
        <tr class="more">
            <td data-name="Date">25/01/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">2</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,680,000</td>
            <td data-name="PpM">28,966</td>
        </tr>
    </tbody>
</table>

最好的办法是用div做一个表格。

像DevJoeri一样，我建议你使用DIV，但如果你不想或不能。添加以下 css 规则对您的示例有帮助

tr {
    float: left;
    width: 100%;
}

请检查此链接

您无法将切换动画应用于 td，tr 标签 它只能应用于div 标签

相关文章：