Javascript JQuery点击动画而不是动画

问题

因此，我有一个

h2

，在

h2

里面有一个

I

，当你点击

h2

，在

h2

滑动切换（）下的

.inputs

。我的问题是，当点击

h2

时，我希望

I

旋转

90度

HTML

<h2 class="toggle-inputs">Add Student <i class="fa fa-caret-down" aria-hidden="true"></i></h2>

                <form class="inputs" action="server/add/add-student.php" method="post">
                    <input type="text" name="student-id" placeholder="* Student ID...">
                    <input type="text" name="firstname" placeholder="* Firstname...">
                    <input type="text" name="lastname" placeholder="* Lastname...">
                    <input type="text" name="teacher-firstname" placeholder="* Teacher's Firstname...">
                    <input type="text" name="teacher-lastname" placeholder="* Teacher's Lastname...">
                    <span class="spare">Spare Block<input type="checkbox" name="spare"></span>

                    <button type="submit" name="add-student"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Student</button>
                </form>

你使用的字体太棒了。如果根据需要简单地将类从fa插入符号改为fa插入符号左/fa插入符号右，不是更容易吗
最后你会说你的问题是。。。然后才说出你想发生什么。你有什么问题？你有错误吗？发生了什么事？你的问题到底是什么？我没有得到一个错误，它只是没有动画，但我希望图标有一个旋转动画时，点击它
// MAIN
function main() {
    $(".toggle-inputs").on("click", toggleInputs);
}

// TOGGLE INPUTS
function toggleInputs() {
    $(this).parent().find('.inputs').slideToggle("slow", function() {
        $(this).children('i').animate({
            "transform": "rotate(90deg)",
        });
    });
}

// LOAD
$(document).ready(main);