如果输入聚焦触发 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>

Answer 2

听起来你想使用 JQuery 事件：

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

https://api.jquery.com/blur/
https://api.jquery.com/focus/