我可以使用JavaScript原型為點擊制作動畫嗎？

Question

我有這個非常簡單的函數綁定：

$('a.accordion-toggle').click(function() {
  $(this).children('.glyphicon').toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
});

當我單擊一行文本時，它將替換人字形。 我考慮過而不是替換，而是將V形臂的旋轉動畫設置為90度。 我只是閱讀了有關原型的知識，以及如何同時向該原型的所有對象添加函數。 我的問題（因為我是原型的新手）是可以從jquery選擇器創建原型並向其中添加函數嗎？

就像是，

DropdownArrow = $('a.accordion-toggle')
DropdownArrow.prototype.turn = function(){...}

Answer 1

我會在點擊時切換動畫圖標的類，例如：

JS

$('a.accordion-toggle').click(function() {
  $(this).children('.glyphicon').toggleClass('rotate-icon');
});

的CSS

.rotate-icon{
    transform: rotate(180deg);
}

我創建了一支筆來顯示動畫的工作方式

更新資料

我忘了提一下，您需要為要設置動畫的元素添加過渡，以創建漂亮的平滑動畫效果，例如：

a {
    transition: 350ms cubic-bezier(0.4,0.6,0.2,0.7);
}

您也可以在緩動部分中使用“緩入/緩出”等功能，但是在這里，我使用的是三次方貝塞爾曲線，它可以使您對緩動進行更好的控制- 這是您可以用來玩轉/學習的工具

Answer 2

您可以，但是像這樣：

$.prototype.turn = function(){
  //your function
}

$('a.accordion-toggle').turn();