Question

您好我已经设置了以下jsFiddle

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

我想知道为什么在使用.focus()时我会得到双重动画事件。

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

由于

Answer 1

工作演示，如果我遗漏了任何内容，请告知我们：@Andy的http://jsfiddle.net/k2Xg2/ 和：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

有些事情正在触发焦点（）两次 - 也许是因为它创建时浏览器会关注它？

看起来你只想要它宽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);

以便初始值是您指定的值此外，你可以在焦点时使用Fading effects，这样盒子似乎不会立即出现，而是以平滑的方式出现

jQuery双焦点动画？

5 个答案: