我有一个bootstrap文本输入和jquery我想:
悬停时展开textform,悬停时缩进。 ✓(already done in this jsfiddle)
当聚焦/选择文本形式(插入点位于文本框内)时,表单将展开,并且不会在光标悬停时缩回。 ✗(被强制)
HTML 的
<div class="col-md-3 col-sm-3">
<div class="input-group">
<input class="form-control" placeholder="Search"></input>
</div>
</div>
的Javascript
$(function(){
var form = $('.input-group');
form.mouseenter(function(){
form.animate({ "width": "+=" + form.width() * 1.4}, "slow");
}).mouseout(function(){
form.animate({ "width": '100%'}, "slow");
});
});
答案 0 :(得分:3)
试试这个
$(function(){
var form = $('.input-group');
var start_width = form.width();
form.find('#input-target').mouseenter(function(){
form.animate({ "width": "+=" + start_width * 1.4}, "slow");
}).mouseout(function(){
form.animate({ "width": start_width+'px'}, "slow");
}).focus(function(){
$(this).unbind('mouseout');
$(this).unbind('mouseenter');
}).blur(function(){
form.animate({ "width": start_width+'px'}, "slow");
$(this).mouseout(function(){
form.animate({ "width": start_width+'px'}, "slow");
}).mouseenter(function(){
form.animate({ "width": "+=" + start_width * 1.4}, "slow");
});
});
});
答案 1 :(得分:2)
解决http://jsfiddle.net/mY8uU/6/
$(function(){
var form = $('.input-group'), w = form.width();
form.mouseenter(function(){
form.animate({'width': '100%'}, 'slow');
}).mouseout(function(){
if(!$('.form-control:focus').length) form.animate({'width': w}, 'slow');
})
$('.form-control').on('blur', function(){
form.animate({'width': w}, 'slow');
});
});
答案 2 :(得分:2)
CSS3是不可能的吗?
在这种情况下,您可以不使用Javascript并使用
.textbox{
width: 200px;
transition: width 1S;
}
.textbox:hover
{
width:250px;
transition: width 1S;
}
这只是一个例子,但您可以根据自己的喜好进行更改。
答案 3 :(得分:1)
你总是可以使用一些CSS3:
input#search {
transition: width .5s;
-webkit-transition: width .5s;
}
input#search:hover, input#search:focus { width:300px; }
答案 4 :(得分:0)
这个对我有用:
$(function(){
var form = $('.input-group');
form.mouseenter(function(){
form.animate({ "width": form.width() * 1.8}, "slow");
}).mouseout(function(){
form.animate({ "width": form.width() / 1.8}, "slow");
});
});
jsfiddle:http://jsfiddle.net/mY8uU/2/