How to animate class substitution with jquery?

Question

JavaScript

Task. When I click, I change the attribute (change the class). The new class gives the width change. How can I make it animate smoothly. The bottom line is not to change the width through animate, but simply replace the class

Answer 1

https://jsfiddle.net/soledar10/5xt2pLfd/
https://jsfiddle.net/soledar10/64Lvvn7m/

Answer 2

We write a new class with a new width and hang it on the click event. Important! so that the previous size does not overlap the new one.
I threw an example in jsfiddle:
https://jsfiddle.net/ucgwfetq/16/