jquery - slideToggle 不流畅

Posted 2023-02-25

【中文标题】jquery - slideToggle 不流畅

【英文标题】：jquery - slideToggle not smooth

【发布时间】：2012-03-29 18:14:43

【问题描述】：

jQuery 中的 slideToggle 函数有问题。它一点也不光滑。每当我点击“查看更多”按钮时，应该slideToggle 的内容就会弹出，没有任何效果。

这是 html 代码：

<td class="third">
   <a href="javascript:void(0)" class="btn btn-primary upgrade1">See More</a>
</td>                           

<tr class="see_more" id="see_more">
      <td colspan="3" class="see_more_content">Hello! How are you doing</td>
</tr>

这是 CSS：

.third
    text-align:right;
    padding-right:10px;

.see_more
    display:none;


.see_more_content
    text-align:center;

最后是javascript：

 <script type="text/javascript">
             $(document).ready(function() 
                 $(".upgrade1").click(function() 
                     $("#see_more").slideToggle("slow");
                  );  
               );
     </script>

我已阅读文章“动画跳转 - 快速提示”，但我认为这不是问题所在。由于我没有为应该slideToggle 的内容指定任何margin 或padding。

提前感谢您的帮助。

【问题讨论】：

尝试滑动切换 div 而不是表格行。为此，将行和 div 都隐藏，显示行，然后将 div 向下滑动，当然反向隐藏。

【参考方案1】：

表格行似乎没有滑动。您应该尝试通过使用 DIV 来找到解决方法。它们的滑动和动画效果要好得多。您还可以将内容包装到一个 div 中，然后滑动它？也许这会推动表格行来模仿幻灯片。

【讨论】：

是的，我现在不会费心发布我的示例。 :)

【参考方案2】：

您正在表格行上运行slideToggle。表格行与某些 css 不兼容。这意味着在某些情况下，它不会滑动，而是在最终可见时才显示出来。