Question

我试图在搜索输入被聚焦时在菜单上触发不透明度动画，并且当它没有聚焦于该菜单以返回不透明度时：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/

如果输入是聚焦触发器X则触发Y.

2 个答案: