jQuery focus/blur toggle in the same div

Question

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

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

}).blur(function() { 

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

}); 

Это код, который работает в основном. Но происходит то, что код пеет, когда я переключаюсь между различными входами (или выбираю) внутри одного и того же div. Когда я нажимаю на один квадрат ввода, меняйте его непрозрачность на 1, и когда я переношу на второй вход, который все еще находится в том же самом коде контейнера контейнера, непрозрачность идет до 0,2, а затем до 1. Есть ли способ не зацикливать его, пока Im расположенных в одном и том же 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. щелкните на любом из элементов управления, а затем щелкните в другом месте.