Animation Toggle Slide right to left input search

Question

I Did something here and I just like to make the input slide from right to left.

http://jsfiddle.net/5Gq7L/5/

I used simple code to show and hide the input field ,

   $("#edit-search-block-form--2").animate({width:'toggle'},500);

Any help. Thanks

Solution 1

As i understood your question is to slide the text input from right to left.

jQuery doesn't provide to slide an element from left or from right, so you can achive this with animate method which jQuery provides.

This is the way i implemented this:

$("#showhide").toggle(function() {
$("#search2").animate({'margin': '-=100px'}, 500);
      $(this).toggleClass("closed");
}, function() {
$("#search2").animate({'margin': '+=100px'}, 500);
      $(this).toggleClass("closed");
});

you can check a fiddle here:

http://jsfiddle.net/5Gq7L/11/

Solution 2

I placed your input field in a div and set the float of both the link and the wrapper div to left:

<div id="input_wrapper">
  <input type="text" id="search2" name="search_block_form" value="" size="30" maxlength="128" >
</div>

That forces the div to go from left to right.

Here is the updated Fiddle: http://jsfiddle.net/robertp/5Gq7L/10/

Comments

[Woody]

Thank you for your help and that fix my problem. thank you so much heartcode ;) Here is update jsfiddle.net/5Gq7L/13