jquery - フォーカス時にjQueryダブルアニメーション?

Question

こんにちは、次のjsFiddleをセットアップしました

http://jsfiddle.net/a9ugu/2/

を使用すると、なぜアニメーション イベントが 2 回発生するのか疑問に思っています.focus()。

「クリックしてください」をクリックすると、表示されるボックスが 2 回アニメーションしますか? どうすればこれを止めることができますか?

ありがとう

Answer 1

動作中のデモ何か見逃した場合はお知らせください: http://jsfiddle.net/k2Xg2/ および@Andy から: http://jsfiddle.net/k2Xg2/1/で十分です。

.focusしたがって、問題は新しい入力ボックスで +50 に呼び出されました。

それが役に立てば幸い、

コード

var box = $('#box');
$('#me').toggle(function() {
    box.show();
   // box.focus();
}, function() {
    box.hide();
});

//#region Search Box
$('#box').focus(function () {
    $(this).select();
    $(this).animate({ width: '+=50' }, 200);
});
box.blur(function () {
    $(this).width(150);
    $(this).animate({ width: '-=50' }, 200);
});​

Answer 2

使ってください

$(this).attr(width,yourvalue);

初期値が指定したものになるようにしますまた、フォーカス時にフェード効果を使用して、ボックスがすぐに表示されないようにすることもできます。

Answer 3

何かが focus() を 2 回トリガーしています。おそらく、作成時にブラウザーがそれにフォーカスしていますか?

とにかく幅150pxだけにしたいようです..だからハードコードしてください：

http://jsfiddle.net/a9ugu/4/

Answer 4

+50のようにターゲット幅を指定するだけではなく、

$box.focus(function () {
    $(this).select();
    $(this).animate({ width: '150' }, 200);
});
$box.blur(function () {
    $(this).animate({ width: '100' }, 200);
});​

デモ: http://jsfiddle.net/joycse06/a9ugu/7/

Answer 5

これが私の行き方です：

var box = $('#box');
$('#me').toggle(function() {
    box.show();
    box.focus();
}, function() {
    box.hide();
});

$('#box').focus(function () {
    //$(this).select(); this line was not needed and was somehow causing your double animation
    $(this).animate({ width: '+=50' }, 200);
});
box.blur(function () {
    $(this).width(150);
    $(this).animate({ width: '-=50' }, 200);
});​

私がコメントアウトした唯一の行は、もう一度フォーカスを呼び出しているようです。