Могу ли я использовать прототип javascript для анимации при нажатии?

Question

У меня есть эта очень простая функция связывания:

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

который заменяет мой шеврон, когда я нажимаю строку текста. Я подумал вместо замены, оживляя вращение шеврона 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); 
} 

I've created a pen to show the animation working

Update

Я забыл упомянуть, что вам нужно добавить переход к элементу вы оживляющий, чтобы создать хороший плавный эффект анимации, например:

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

вы также можете использовать легкость в использовании/облегчение и т. Д. Для облегчающей части, но здесь я использую кубический безье, который дает вам более тонкое управление ослаблением - here's a tool you can use to play around/learn about it

Answer 2

Вы можете, но как это:

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

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