css - Animate text size with jQuery then return to previous state -


I'm playing with animating text while clicking. You can see here:

I have buttons of different classes that define shape:

    

Then when one It is animated in a bigger size.

  $ ('.button-1, .button-2, .button-3'). Click (function () {$ (this) My question is that I only want to be one bigger at a time and all the siblings will have to return to their original size. I will add animate function to an inline style I see, is there a way to remove just the inline styles associated with the click buttons?   

This works and looks better ...

  $ (document) .ready (function () {$ ('.' Button -1 , .button-2, .button-3 '). Each (function () {$ (this). Data (' original-size ', $ (this) .css (' fontSize '); $ (this). Click (function () {$ (this). Allow ({fontSize: "40px"}, 1000); $ (this) .siblings (). Each (function () {var original size = $ (this). Data ('original-size'); if ($ (ThaiS) .css ('fontSize') = original size) {$ (this). Value ({fontSize: originalSize}, 500);}})}} ;}};});   

.

If you were lazy, you could also ...

  $ (This) .siblings ()   

style attribute by additional style So, I recommend you use a pre-code.

Comments