使用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属性添加额外的样式，则此解决方案不可靠，并且可能需要进行痛苦的调试。我建议您使用以前的代码。

Answer 2

这里有一个更短的方法

$(document).ready(function() {
    $('.button-1,.button-2,.button-3').click(function() {
        $('div').removeClass('button-4', 50);
        $(this).addClass('button-4', 100);

    });
});

在http://jsfiddle.net/nLnvY/2/查看工作示例