Question

在fieldset中分隔一个表单我想突出显示用户操作的字段集，这可能是一个解决方案：

<script>
    $().ready(function() {
        $('form :input').focus(function() {
            $(this).closest('fieldset').addClass('f1');
        });

        $('form :input').blur(function() {
            $(this).closest('fieldset').removeClass('f1');
        });
    });
</script>

其中f1是css类

.f1 {
    background-color: grey;
    transition: 2s;
}

但是我想知道是否存在一个不使用css类的解决方案，我试图使用animate（）函数而没有想要的结果。

Answer 1

您还必须加载jQuery UI以便为颜色设置动画 - 应该注意jQuery UI中的.animation()函数不支持CSS颜色名称。您必须使用十六进制值rgb[a]()，hsl()等

$(function () {
    $('form :input').focus(function () {
        $(this).closest('fieldset').stop(true,true).animate({
            "background-color": "#808080" // CSS hex color equivalent of grey
        },2000);
    });

    $('form :input').blur(function () {
        $(this).closest('fieldset').stop(true,true)..animate({
            "background-color": "transparent"
        },2000);
    });
});

注意：在.stop(true,true)方法之前使用 .animate()，以确保如果用户快速关注并模糊显示动画队列不会在堆栈中结束输入。

http://jsfiddle.net/teddyrised/8wRhG/

但是，我不建议仅为了彩色动画而加载jQuery UI。我可以建议使用CSS转换加上用JS设置字段集背景吗？

$(function () {
    $('form :input').focus(function () {
        $(this).closest('fieldset').css({
            "background-color": "#808080"
        });
    });

    $('form :input').blur(function () {
        $(this).closest('fieldset').css({
            "background-color": "transparent"
        });
    });
});

CSS：

form fieldset input {
    transition: background-color 2s linear;
}

http://jsfiddle.net/teddyrised/8wRhG/4/

不使用css突出显示字段集

1 个答案: