使用jquery在悬停时展开文本表单

时间:2013-12-10 12:49:39

标签: javascript jquery forms twitter-bootstrap

我有一个bootstrap文本输入和jquery我想:

  1. 悬停时展开textform,悬停时缩进。 ✓(already done in this jsfiddle

  2. 当聚焦/选择文本形式(插入点位于文本框内)时,表单将展开,并且不会在光标悬停时缩回。 ✗(被强制)

  3. 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");
      });
    });
    

5 个答案:

答案 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");
      });
  });
});

看到这个 http://jsfiddle.net/ZQ3nZ/

答案 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/