jQuery焦点/模糊切换在同一个div内

Question

$('#topcontainer input,select').focus(function() {

   $("#square1").animate({"opacity":"1"}, 400);

}).blur(function() {

    $("#square1").animate({"opacity":"0.2"}, 400);

});

这是基本可行的代码。但是当我在同一个div中的不同输入（或选择）之间切换时，代码会循环。当我点击一个输入square1时将其不透明度更改为1，当我转移第二个输入仍然在同一个div容器代码循环时，不透明度变为0.2然后变为1.有没有办法不循环它而我位于同一个div。

感谢

Answer 1

不确定你想要什么，但我想你应该

使用jQuery .stop来停止正在进行的动画。

$('#topcontainer input,select').focus(function() {

   $("#square1").stop().animate({"opacity":"1"}, 400);

}).blur(function() {

    $("#square1").stop().animate({"opacity":"0.2"}, 400);

});

请参阅此fiddle。单击任何控件，然后单击其他任何位置。