jquery - using mouseover to show search input type -

i'm trying achieve jquery function, mouseoever submit button, want search input type appear, same kind of effect slidetoggle.

i don't want use width toggle because don't want search input hide when hovering again submit button. why use show();.

but effect not perfect, bottom border moves. shown on 1st example on jsfiddle.

http://jsfiddle.net/76y7czvz/1/

what i'm trying have same show function in 1st exemple, same effect shown on 2nd exemple on jsfiddle.

here jquery code :

$( "#searchsubmit" ).on( "mouseenter", function() { $("#s").show("xslow"); });  $( "#searchsubmit_2" ).on( "mouseenter", function() { $("#s_2").animate({width: 'toggle'}, "xslow"); }); 

thanks lot !

you can optionally use .one() method achieve this:

$( "#searchsubmit_2" ).one( "mouseenter", function() {     $("#s_2").animate({width: 'toggle'}, "xslow"); }); 

this prevent input toggling when hovered on again.

updated fiddle