使用jQuery为文本大小设置动画然后返回到先前的状态

Question

点击时我正在玩动画文字.

我有各种类定义大小的按钮:

<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;}

然后当点击一个时,它会被设置为更大的动画.

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

我的问题是我只希望一次拥有一个大,并让所有兄弟姐妹恢复到原来的大小.我看到animate函数通过向文本添加内联样式来工作,有没有办法可以删除附加到单击按钮兄弟姐妹的所有内联样式？

Answer 1

这工作,看起来好多了......

$(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.

如果你很懒,你也可以......

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

jsFiddle.

但是,如果你或jQuery通过属性添加额外的样式,这个解决方案是不稳定的,并且可能倾向于痛苦的调试style.我建议你使用以前的代码.