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属性添加了额外的样式，那么这个解决方案就是 flaky 并且可能会倾向于痛苦的调试。我建议你使用以前的代码。

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/

上的工作示例

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

2 个答案: