JQuery auf Klick-Animation nicht Animieren

Question

Problem

So habe ich eine h2 und im Inneren des h2 gibt es eine i und wenn Sie auf der h2, die .inputs unterhalb der h2slideToggle() ‚s. Mein Problem ist, dass, wenn die h2 angeklickt wird, möchte ich die i zu 90deg drehen.

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> 

JavaScript

// 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); 

Answer 1

Sie verwenden Font Ehrfürchtig. Wäre es nicht einfacher, die Klasse einfach von fa-caret-down zu fa-caret-left/fa-caret-right zu wechseln