如何在点击

时间:2017-06-27 14:47:29

标签: jquery

当我点击此按钮时,我希望动画.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');
    }
});

谢谢你们:)

2 个答案:

答案 0 :(得分:0)

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

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

或者

$(this).show(500);

更多文档HERE

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

答案 1 :(得分:0)

您可以使用 .slideUp() .slideDown() .animate() jQuery方法来实现此目的。

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