0

フォームの検証を行っています。フィールドの検証に失敗した場合は、色を変更してフィールドをシェイクしたいと考えています。私のコード:

$('#'+vet)
.css({'background-color':'yellow','border-color':'red'})
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "0px" }, 100);

フィールドの背景と境界線の色は変更されますが、フィールドは揺れません。

何かご意見は？

4

3 に答える 3

1

フィールドのpositionプロパティをrelative次のように設定します。

input {
    position : relative;
}

(構造に最も適したセレクターを使用します。)

デモ: http://jsfiddle.net/Xt7JW/

デフォルトでは、要素にはstatic設定left(およびtopなど) が影響を与えない配置があります。

于 2013-07-07T21:39:56.630 に答える
1

animate()アニメーションを直接連結するのではなく、メソッドに渡すことができるコールバック メソッドでアニメーションをリンクしてみてください。jQuery ドキュメントの状態:

指定した場合、アニメーションが完了すると、完全なコールバック関数が起動されます。>これは、異なるアニメーションを順番に並べるのに役立ちます。

現在動いていない理由は、同時に反対方向にアニメーション化しようとしているからだと思います。これはテストされていませんが、試してください：

$('#' + vet).css({'background-color':'yellow', 'border-color':'red' })
.animate({ left: '-=10px'}, 100, function() {
   $('#' + vet).animate({left: '+=20px'}, 100, function() {
     $('#' + vet).animate({left: '-=20px'}, 100, function() {
        $('#' + vet).animate({left: '+=10px'}, 100);
     });
   });
});

を使用+=すると、位置を相対に設定する必要もなくなります。これで、最後のアニメーションが終了すると、各アニメーションが実行されます。

編集：.animate().animate()結局これと同じようです。

于 2013-07-07T21:52:20.280 に答える
1

Using the left, top, right, bottom properties to change the position of an element, it also has to have a positioning context:

.element { position: relative; }

or

.element { position: absolute; }

or

.element { position: fixed; }

Depending on your needs.

于 2013-07-07T21:42:43.103 に答える