How to smooth this search box animation

Hi guys,
I'm trying to smooth this search box animation, it's not working.
It jumps from one end point to another. How to make it flow from left to right and vice versa smoothly.

JSfiddle: http://jsfiddle.net/mw7yK/

Thank you,

 

OK. I got the answer here: http://jsfiddle.net/mw7yK/12/

 

One word of advice: DON'T... Just DON'T...
It's bad enough you're hiding a form element, but with the scripttard equivalent of placeholder pissing on accessibility, complete lack of a label, no practical submit and using jquery-tard BS to do CSS' job....

You've got a laundry list of how NOT to use JavaScript on a website.

 

Thanks for the advice. Yeah, I know CSS vs JQuery is something like native vs add-on. Here's what I'm talking about: http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/

But CSS vs pure or vanilla JavaScript as they call it I still have my big doubt. According to Chrome's dev tool, JavaScript is loaded first and faster.

By the way, this website requires backward compatible up to IE6. Most of the users are office workers whose computers are running on Windows XP and most of them still have a 3.5 floppy drive. I don't know a better way to create this than using JQuery.

 

I think you missed what I meant. The 'better way to creat this" is to NOT have any goofy animation in the first place be it scripted or CSS3 driven. It's an accessibility mess, pointless waste of code, and if you can't find room for a label, input[text] and input[submit] on the page, there's something wrong with the page.

Create a form, put a fieldset in it, add a LABEL, INPUT[text]. and a INPUT[submit] (or INPUT[image] if you want to get 'fancy') style it with CSS normally and be done with it!

Goofy bandwidth wasting animated crap like that (particularly when you're trying to animate it and don't even HAVE a working submit or LABEL) is a poster child for what I mean by "JavaScript for nothing" and "Has no business on a website in the first place" -- it reeks of failing to ask the question "Sure, but what good is it to the user?"

OF course the "JS loaded first and faster" means jack ****, since without CSS you don't have the layout for users to interact with ANYWAYS.

 

Oh, and if you REALLY insist on putting this type of garbage on a website, this is how you dot your t's and cross your i's... Wait.. that's not right...

First, start out with a complete and accessible form, with a proper LABEL, FIELDSET and INPUT[SUBMIT] -- something you should have before you even THINK about adding scripting to the page since again, the unwritten rule of JavaScript: "If you can't make the page work without scripting FIRST, you likely have no business adding scripting to it!"

<form id="searchForm" action="#" method="get">
	<fieldset id="searchShowHide">
		<label for="searchText">Search:</label>
		<input type="text" id="searchText" name="q" />
		<input type="submit" class="submit" value="Go" />
	</fieldset>
</form>

Code (markup):

Then I'd make a script that adds a DIV with an A inside it, that anchor being the show/hide control. I would use the full text "show search" and "hide search" as appropriate so you don't confuse users with them trying to click on the show/hide as the submit. (a usability issue with what you have). Instead of the fat bloated halfwit steaming pile of manure knowns as turdpress, I'd use a few small functions to do things like text replacements or make new elements. I'd also toss it all in an anonymous function so we don't have any namespace headaches caused by our scripts, reducing the odds of any cross-talk between scripts to nil.

(function() {

	function replace(e, txt) {
		while (e.firstChild) e.removeChild(e.firstChild);
		e.appendChild(d.createTextNode(txt));
	}
	
	function make(tag, content, parent) {
		var e = d.createElement(tag);
		if (content) e.appendChild(
			typeof content == 'object' ?
			content : 
			d.createTextNode(content)
		);
		if (parent) parent.appendChild(e);
		return e;
	}
	
	var
		d = document,
		form = d.getElementById('searchForm'),
		fieldset = d.getElementById('searchShowHide'),
		toggle = make('a', 'Show Search', make('div', false, form)),
		/*
			we need the DIV parent above as inline-level elements are invalid 
			as children of FORM, no matter how many dumbasses write invalid code
			placing their LABEL and INPUT directly in FORM.
		*/
		hiddenState = true;
		
	fieldset.className="hideStart";
	/*
		since we just made the element ourselves, we don't need to worry about 
		wasting time on attachEvent / addEventListener, and that means we can
		access our variables from this anonymous function -- so no even namespace
		headaches either.
	*/
	toggle.onclick = function(e) {
		if (hiddenState = !hiddenState) {
			replace(toggle, 'Show Search');
			fieldset.className = 'hide';
		} else {
			replace(toggle, 'Hide Search');
			fieldset.className = 'show';
		}
	}
	
})();

Code (markup):

As you can see the update function just swaps the text in our anchor and changes the classes on the fieldset - this way our CSS can do all the grunt-work.

#searchForm {
	float:right;
	zoom:1; /* trip haslayout, fix float bugs legacy IE */
}

#searchForm fieldset {
	overflow:hidden;
	white-space:nowrap;
	text-align:right;
}

#searchForm fieldset,
#searchForm div {
	float:left;
	line-height:2em; /* helps everything line up 'centered' */
}

#searchForm div {
	padding-left:0.4em;
}

#searchForm label,
#searchForm input,
#searchForm a {
	display:inline-block;
	font:normal 100%/1.2em arial,helvetica,sans-serif;
	vertical-align:middle;
}

#searchForm input {
	padding:0.1em 0.5em;
}

#searchForm input,
#searchForm a {
	border:2px solid #666;
	-webkit-border-radius:0.5em;
	-moz-border-radius:0.5em;
	border-radius:0.5em;
}
	
#searchForm .submit,
#searchForm a {
	background:#DDD;
	-webkit-box-shadow:
		inset 0 0.5em 0.5em #FFF;
	-moz-box-shadow:
		inset 0 0.5em 0.5em #FFF;
	box-shadow:
		inset 0 0.5em 0.5em #FFF;
}

#searchForm a {
	width:8em;
	text-align:center;
	padding:0.1em 0;
}

#searchForm .hideStart,
#searchForm .hide {
	width:0;
}

#searchForm .hide,
#searchForm .show {
	-webkit-transition:width 0.5s;
	-moz-transition:width 0.5s;
	transition:width 0.5s;
}

#searchForm .show {
	width:18em;
}

#searchText {
	width:10em;
	padding:0.1em;
	border:2px solid #444;
}

Code (markup):

... and here's a live demo of that in action:
http://www.cutcodedown.com/for_others/ketting00/searchHide/template.html

With an unlocked directory for easy access to the bits and pieces:
http://www.cutcodedown.com/for_others/ketting00/searchHide/

While early versions of IE don't get the animation, it still shows/hides the element so it's working, even if they completely mash the styling since older versions of IE are complete re-re's in terms of how INPUT and TEXTAREA receive style. That's as far as I'd go with that for them -- make it WORK; who gives a flying purple fish if people who can't join us in THIS century don't get rounded corners and some stupid animation?

Though again, if I actually cared about legacy IE users, I wouldn't have ANY of this except that markup. No scripting, no goofy animation, just show the blood form! OH NOES, not thatz.

BUT, if you're going to do it, it should use the proper complete semantically marked up form, gracefully degrade scripting off by having the scripting only elements and behavior added *SHOCK* by the script, and use CSS3 for the animations since they'll consume a fraction the CPU power and battery life on mobile. Though I'd probably disable the entire scripttardery on mobile anyways since that crap just makes sites harder to use, no matter how many nitwits and nudniks seem to be pissing on their menus with that type of crap now...

 

Or not... wow, why is FF ignoring overflow:hidden on a 0 width element?!? That's screwed up... Works in everything else...

... and that's why I wouldn't bother putting this **** on a website in the first place.

 

Man, you help me solve the problem. This is beyond expectation. Really appreciated.
When dealing with old browser compatible problem I add something like this to the header, it help a bit:

<!--[if lte IE 8]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Code (markup):

 

I don't like IE Conditional comments, so that's a strike against that... and that HTML5.js crap? I've got a FAR better solution, don't use the steaming pile of halfwit manure designed to set coding practices back to the WORST of pre-STRICT development known as HTML 5. Developers are dumber for HTML 5 even EXISTING.