0

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

<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() 函数而没有想要的结果。

4

1 回答 1

1

您还必须加载 jQuery UI 才能为颜色设置动画 - 应该注意.animation()jQuery UI 中的函数不支持 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/

于 2013-11-01T08:39:45.697 回答