1

私は初心者の Web デザイナーですが、JavaScript と jQuery を試してみます。W3Schoolsを少し見て回った後、簡単な jQuery アニメーションを作成しようとしましたが、うまくいかないようです。

<html>
    <head>
        <script type="text/javascript" src="jQuery.js"></script>
        <script>
            $(document).ready(function(){
                $("#name").blur(funtion(){
                    if(value==null || value==""){
                        $("#name").animate({background:#D23E42}, "slow");
                    }
                });
            });
        </script>
        <style type="text/css">
        body
        {
            font-family: Arial;
        }

        #name
        {
            background:#6BAA64;
            color: #FFFFFF;
            border:2px none;
            padding:5px;
            -webkit-border-radius:8px 8px;
            -moz-border-radius:8px 8px;
            border-radius:8px 8px;
            text-align: center;
        }
        </style>
    </head>

    <body style="text-align: center;">
        Name:
        <br />
        <input id="name" type="text" value="Your Name" />
    </body>
</html>

単純な連絡先/登録フォームモデルをセットアップしようとしていたので、名前フィールドが空のままであるか、変更されていない場合、(ぼかしで) 赤くなります。

4

5 に答える 5

6

そのコードには多くの間違いがあります：

$("#name").blur(function() {
    if (!this.value) {
        $(this).css('background-color', '#D23E42');
    }
});​

間違い:

  • funtion=>function
  • value=> this.value.
  • 入力の値が になることはありませんnull。空の文字列のみが可能です。
  • animate=> css、その理由は、プラグインなしでは背景色の変更をアニメーション化できないためです。
  • 色は文字列である必要があります#D23E42=>'#D23E42'
  • background=> background-color.
  • $("#name")=>$(this)

w3school での学習は効果がないように思われるため、やめたほうがよいかもしれません。

于 2012-04-27T06:35:46.217 に答える
2

申し訳ありませんが、jColorを使用しない限り、背景をアニメーション化することはできません

ドキュメントから：

以下に示す場合を除き、すべてのアニメーション化されたプロパティは単一の数値にアニメーション化する必要があります。数値でないほとんどのプロパティは、基本的な jQuery 機能を使用してアニメーション化できません (たとえば、幅、高さ、または左はアニメーション化できますが、jQuery.Color() プラグインを使用しない限り、背景色はアニメーション化できません)。

于 2012-04-27T06:36:13.947 に答える
1

jQuery.animate背景色をアニメーション化することはできませんが、などのプロパティのみです。背景色をアニメーション化するには、 https://github.com/jquery/jquery-colorwidth, height, left, topのようなプラグインを使用する必要があります

于 2012-04-27T06:36:34.737 に答える
1

2 つの間違いがあります。

  1. 色の値は文字列なので、"#D23E42" を引用符で囲む必要があります。そうしないと、構文エラーが発生する可能性があります。
  2. いずれにせよ、JQuery は実際には色をアニメーション化しません。私は試していませんが、この機能を追加すると主張するプラグインがあります。

http://www.bitstorm.org/jquery/color-animation/

于 2012-04-27T06:37:08.680 に答える
1

jsBin デモ

$("#name").focusout(function(){                  
  var value = $.trim($(this).val());                 
  if(value === ''){    
    $(this).animate({backgroundColor:'#D23E42'}, 500);
  }   
});
  • このデモでは、jQuery UI ライブラリを使用して背景のフェード カラーを実現しました。
  • .focusout()を使用する
  • $.trim()を使用して、空のスペースが有効な入力として受け入れられないようにします
  • 常に===値の比較に使用

編集 Hede は UI のないデモ
です。ユーザーがテキストを再入力した場合は、必ず色をやり直す必要があります。

$("#name").focusout(function(){                
  var value = $.trim($(this).val());                 
  if(value === ''){    
    $(this).css({background:'#D23E42'});
  }else{
    $(this).css({background:'#6BAA64'});
  }
});

UI ライブラリなしのデモ

于 2012-04-27T06:39:58.373 に答える