Jquery 实现Text文本框中文字移动到外部

原来：

实现效果：单击文本框中就将“用户名”移动到外面哦！

 

	<div class="y_same_item">
			<input class="ysame_input" type="text" _input="" value="" id="userName">
			<span class="y_same_label">用户名</span>
		</div>

			$(function() {
				//单击移动到指定的位置哦！
				$(".ysame_input").click(function() {
					var div = $(".y_same_label");
						div.animate({left: -65}, 100);
				});
           });

body, p, form, input, button, dl, dt, dd, ul, ol, li, h1, h2, h3, h4 {
		    margin: 0;
		    padding: 0;
		    list-style: none;
	    	}
			
			.y_same_item {
				position: relative;
				/*z-index: 2;*/
				width: 328px;
				height: 50px;
				border: 1px solid #dedede;
				border-radius: 3px;
				margin: 0px auto;
				margin-top:20px;
			}
			
			.ysame_input {
				position: relative;
				z-index: 2;
				width: 288px;
				height: 20px;
				margin-top: 15px;
				padding: 0px 20px;
				background: 0;
				border: 0;
				outline: 0;
				font-size: 14px;
				line-height: 20px;
				color: #666;
			}
			
			.y_same_label {
				position: absolute;
				left: 20px;
				top: 100px;
				display: inline-block;
				height: 50px;
				font-size: 14px;
				line-height: 50px;
				color: #666;
				margin-top: -100px;
				/*border: 1px solid red;*/
			}