Javascript 如果输入为聚焦触发X，否则触发Y

我试图在搜索输入聚焦时触发菜单上的不透明度动画，当该菜单未聚焦时，返回到不透明度：1

下面是我拙劣的代码

if($('input#edit-keys-2').is(":focus")){
  $('#zone-header ul#nice-menu-1').animate({opacity:0}, 300);
}else{
  $('#zone-header ul#nice-menu-1').animate({opacity:1}, 300);
}   

使用和像这样代替

$('input#edit-keys-2').on("focus", function(){
  $('#zone-header ul#nice-menu-1').animate({opacity:0}, 300);
}).on("blur", function(){
  $('#zone-header ul#nice-menu-1').animate({opacity:1}, 300);
});

$（'input#edit-keys-2'）。关于（“焦点”，函数（）{
$（'#nice-menu-1'）。设置动画（{opacity:0}，300）；
}).on（“模糊”，函数（）{
$（'nice-menu-1'）。设置动画（{opacity:1}，300）；
});

为我设置动画
听起来像是要使用JQuery事件：

.on( "blur", handler )
.on( "focus", handler )



因为当输入失去焦点时会触发模糊事件。看看这个。但是使用
.on（）
您正在侦听这些事件（附加事件处理程序）