jquery - jQuery双动画焦点？

Question

嗨，我已经设置了以下 jsFiddle

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

我想知道为什么我在使用.focus().

点击“点击我”，出现两次动画的框？我怎样才能阻止这个？

谢谢

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

某些东西触发了 focus() 两次 - 也许在创建它时浏览器会关注它？

看起来你只希望它有 150px 宽.. 所以只需硬编码它：

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

Answer 3

而不是+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 4

这是我的尝试：

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);
});​

我注释掉的唯一一行似乎是第二次调用焦点。

Answer 5

请用

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

这样初始值就是您指定的值您还可以在焦点时使用淡入淡出效果，这样框似乎不会立即出现，而是以平滑的方式出现