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

.animation()色をアニメーション化するには、jQuery UI もロードする必要があります。jQuery UI の関数はCSS の色名をサポートしていないことに注意してください。16 進値、 などを使用する必要があり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 に答える