CODEWITHSUNDEEP
jqueryanimationtoggleslide
Woody
Woody

Reputation: 23

Animation Toggle Slide right to left input search

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

Upvotes: 2

Views: 11253

Answers (2)

Jai
Jai

Reputation: 74738

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/

Upvotes: 1

robertp
robertp

Reputation: 3642

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/

Upvotes: 2

Related Questions