I have a bootstrap text input and with jquery I would like to:

1. Expand textform on hover and retract on hover out. ✓ (already done in this jsfiddle)

2. When textform is focused/selected (insertion point is inside text box), the form is expanded and does not retract on cursor hover out. ✗ (to be pelted)

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

I have a bootstrap text input and with jquery I would like to:

1. Expand textform on hover and retract on hover out. ✓ (already done in this jsfiddle)

2. When textform is focused/selected (insertion point is inside text box), the form is expanded and does not retract on cursor hover out. ✗ (to be pelted)

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

• javascript
• jquery
• forms
• twitter-bootstrap

Share Improve this question Follow edited Dec 11, 2013 at 1:45 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Dec 10, 2013 at 12:49 Jeremy LynchJeremy Lynch 7,27033 gold badges5757 silver badges6767 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

try this

$(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");
      });
  });
});

see at this http://jsfiddle/ZQ3nZ/

Solved http://jsfiddle/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');
  });
});

Is CSS3 out of the question?

In that case you can do without Javascript and use

.textbox{
   width: 200px;
   transition: width 1S;
}

.textbox:hover
{
    width:250px;
    transition: width 1S;
}

This is just an example, but you can change it to your liking.

You could always employ some CSS3:

input#search {
  transition: width .5s;
  -webkit-transition: width .5s;
}
input#search:hover, input#search:focus { width:300px; }

this one worked for me:

$(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/mY8uU/2/