Как убрать и вернуть ширину?

Question

[zuraavl]

Хочу сделать чтобы когда наводишь на звездочки, их ширина уменьшалась и сразу увеличивалась к исходной. Так себе, маленький спецэффект.
Сделал это с помощью этого кода:

$(".people-item").hover(function () {
    var starsWidth = $('.star-ratings-css-top').width() / $('.star-ratings-css-top').parent().width() * 100;
    
    $(this).find( ".star-ratings-css-top" ).css("width","0%")
    $(this).find( ".star-ratings-css-top" ).animate({
      width: [ starsWidth ]
    }, {
      duration: 750,
      specialEasing: {
        width: "easeOutBounce"
    }})
    
  });

Но работает через раз и куча багов. Я уверен что есть решения получше, но не могу их понять/найти

Comments

[Ankhena]

JS там лишний, есть CSS-анимации

Answer 1

[Amazing-Space-Invader]

codepen.io/anon/pen/amkQva - копай отсюда.