[英]JQuery on click animation not animating
问题
所以,我有一个h2
和内部h2
还有一个i
,当你点击h2
时, .inputs
的下方h2
slideToggle()
的。 我的问题是,当单击h2
时,我希望i
旋转90deg
。
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);
您正在使用Font Awesome。 根据需要简单地将类从fa-caret-down更改为fa-caret-left / fa-caret-right会更容易
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.