Jquery在没有队列的情况下改变hover和焦点上的输入宽度

我希望我的输入在hover或焦点时改变宽度，并在离开焦点和hover后将其更改回来。

$(document).ready(function() { $("#tbRegex").hover(function() { $(this).stop(true, false).animate({ width: "200px" }); }, function() { $(this).stop(true, false).animate({ width: "40px" }); }); $("#tbRegex").focus(function() { $(this).stop(true, false).animate({ width: "200px" }); }); $("#tbRegex").blur(function() { $(this).stop(true, false).animate({ width: "40px" }); }); }); 

 #tbRegex{width:40px;} 

但我不知道如何分辨焦点和hover必须留下。

Answer 1

你可以使用像“isfocusedin”这样的属性并将其设置为1，在鼠标hover时你可以通过fisrt检查焦点不是1

在徘徊

 if( $(this).attr("isfocusedin")!=1) $(this).stop(true, false).animate({ width: "40px" }); 

工作演示：

 $(document).ready(function() { $("#tbRegex").hover(function() { $(this).attr("ishoveredin",1); $(this).stop(true, false).animate({ width: "200px" }); }, function() { $(this).attr("ishoveredin",0); if( $(this).attr("isfocusedin")!=1) $(this).stop(true, false).animate({ width: "40px" }); }); $("#tbRegex").focus(function() { $(this).attr("isfocusedin",1); $(this).stop(true, false).animate({ width: "200px" }); }); $("#tbRegex").blur(function() { $(this).attr("isfocusedin",0); $(this).stop(true, false).animate({ width: "40px" }); }); }); 

 #tbRegex{width:40px;}