Question

I am playing around with animating text when clicked.

I have buttons with various classes that define size :

<div class="button-1">Click Me!</div>
<div class="button-2">Click Me!</div>
<div class="button-3">Click Me!</div>

.button-1 {font-size: 10px;}
.button-2 {font-size: 20px;}
.button-3 {font-size: 30px;}

Then when one is clicked it is animated to a bigger size.

    $('.button-1,.button-2,.button-3').click(function(){
    $(this).animate({fontSize: "40px" }, 1000 );

My question is I only want to have one big at a time and have all of the siblings return to their original size. I see the animate function works by adding an inline style to the text, is there a way I can just delete out all of the inline styles appended to the clicked buttons siblings?

Answer 1

This works and looks much better…

$(document).ready(function() {
    $('.button-1,.button-2,.button-3').each(function() {

        $(this).data('original-size', $(this).css('fontSize'));

        $(this).click(function() {

            $(this).animate({
                fontSize: "40px"
            }, 1000);

            $(this).siblings().each(function() {

                var originalSize = $(this).data('original-size');

                if ($(this).css('fontSize') != originalSize) {

                    $(this).animate({
                        fontSize: originalSize
                    }, 500);
                }
            });

        });
    });
});

jsFiddle.

If you were lazy, you could also do…

$(this).siblings().removeAttr('style')

jsFiddle.

This solution, however, is flaky and could lean to painful debugging if you or jQuery adds extra styles via the style attribute. I recommend you use the former code.