javascript - How to smooth this search bar animation -


I tried to modify the code that I took for the use of my use:

CSS: < / P>

  .search-bar {width: 200px; display none; } .searchbox {display: inline;} .trigger {display: inline}  

HTML:

  & lt; Div class = "search-bar" & gt; & Lt; Input type = "text" name = "s" class = "search box" value = "search" onfocus = "this.value = ''" & gt; & Lt; / Div & gt; & Lt; Button class = "trigger" & gt; Search & lt; / Button & gt;  

js:

  $ (document) .ready (function () {$ ('trigger'). "(Function () {if ({:: 'Search-bar "). ($:' Search-bar '). Animate ({width:' toggle '}). CSS ({' display ':' inline ' }};} And {$ ('search bar'). Animate ({width: 'toggle'}). CSS ({'display': 'inline'});}});});  

It does the required work, but animation is not easy how to make animation flow smoothly.

Thanks,

Something like this Click (function () {if ($ ("search-bar"),

  $ (document) .ready (function () {$ ('trigger'). (': Visible')) {$ ('search-bar'). Fade ();} and {$ ('search-bar'). FadeIn ();}})}};  

Simplified version

  $ (document) .ready (function () {$ ('. Trigger'). "(Function () {$ ('.search-bar'). FadeToggle ("slow");});});  

Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -