jQuery更改悬停时输入的宽度和焦点，而无需队列 [英] Jquery change width of input on hover and focus without queue
本文介绍了jQuery更改悬停时输入的宽度和焦点，而无需队列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望我的输入在悬停或聚焦时更改宽度，并在保持焦点并悬停后更改其宽度.
I want my input to change the width when hover or focus and change it back after leaving focus AND 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;}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input id="tbRegex" type="text" placeholder="Text" />
</body>
</html>
但是我不知道该如何说出焦点和悬停.
but i dont know how to tell that focus AND hover have to be left.
推荐答案
您可以使用诸如"isfocusedin"之类的属性并将其设置为1，悬停时可以先检查焦点是否为1
You can make use of attributes like for example "isfocusedin" and set it to 1, on hover out you can fisrt check that focused is not 1
<input id="tbRegex" type="text" placeholder="Text" ishoveredin="0" isfocusedin="0" />
悬停
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;}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input id="tbRegex" type="text" placeholder="Text" ishoveredin="0" isfocusedin="0" />
</body>
</html>
这篇关于jQuery更改悬停时输入的宽度和焦点，而无需队列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
