javascript - 如果输入焦点触发 X，否则触发 Y

Question

当搜索输入聚焦时，我试图在菜单上触发不透明度动画，当搜索输入不聚焦时，该菜单将返回到 opacity: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);
}   

Answer 1

使用.focus()和 .blur()像这样代替

$('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').on("focus", function(){
  $('#nice-menu-1').animate({opacity:0}, 300);
}).on("blur", function(){
  $('#nice-menu-1').animate({opacity:1}, 300);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="focus me" id="edit-keys-2"/>
<div id="nice-menu-1">animate me</div>