如何在点击

Question

当我点击此按钮时，我希望动画.html（）以使宽度从展开过渡到更平滑。

这是我的按钮：

<a href="#" class="toggle-form">Expand</a>

这是我的jquery：

$('.toggle-form').click(function(e) {
    e.preventDefault();

    $(this).toggleClass('active');

    if($(this).hasClass('active')) {
        $(this).html('Collapse');
    } else {
        $(this).html('Expand');
    }
});

谢谢你们：）

Answer 1

您需要为show()和hide()提供时间参数

$(this).show("fast");

或者

$(this).show(500);

更多文档HERE

还有其他使用CSS过渡效果的方法。

Answer 2

您可以使用 .slideUp（）和 .slideDown（）或 .animate（） jQuery方法来实现此目的。

参考：http://api.jquery.com/slideup/，http://api.jquery.com/slidedown/，http://api.jquery.com/animate/