jquery切换动画_jQuery的动画形式切换

jquery切换动画

View demo 查看演示 Download Source 下载源

In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.

在本教程中，我们将创建一个简单的动画表单开关，其中包含三种非常常见的表单。 这个想法不是在用户转到另一种表单时离开页面，而是使新表单出现在同一容器中，以扩大或缩小到新表单的尺寸。

We will ensure that the form switch works as well when JavaScript is disabled in which case we will simply jump to the other’s form page.

在禁用JavaScript的情况下，我们将确保表单开关也能正常工作，在这种情况下，我们将直接跳转到其他人的表单页面。

So, let’s begin by creating and styling the three forms.

因此，让我们开始创建和样式化这三种形式。

标记 (The Markup)

We will create three different forms, a login form, a registration form and a password reminder form with just one input field. They will all have different sizes and numbers of inputs.

我们将创建三种不同的表单，即登录表单，注册表单和密码提示表单，仅包含一个输入字段。 它们的输入大小和数量都不同。

First, we will create a wrapper for all three forms.

首先，我们将为所有三种形式创建一个包装。

<div id="form_wrapper" class="form_wrapper">
<!-- We will add our forms here -->
</div>

Then we will add each form element to the wrapper and insert the necessary input fields. Each form is going to have a heading and a bottom box with the submit button. The registration form, which will be our first form, will have two columns that will float next to each other:

然后，我们将每个表单元素添加到包装器中，并插入必要的输入字段。 每个表单都有一个标题和一个带有“提交”按钮的底部框。 注册表格，这将是我们的第一个表格，将有两列彼此相邻浮动：

<form class="register">
	<h3>Register</h3>
	<div class="column">
		<div>
			<label>First Name:</label>
			<input type="text" />
		</div>
		<div>
			<label>Last Name:</label>
			<input type="text" />
		</div>
		<div>
			<label>Website:</label>
			<input type="text" value="http://"/>
		</div>
	</div>
	<div class="column">
		<div>
			<label>Username:</label>
			<input type="text"/>
		</div>
		<div>
			<label>Email:</label>
			<input type="text" />
		</div>
		<div>
			<label>Password:</label>
			<input type="password" />
		</div>
	</div>
	<div class="bottom">
		<div class="remember">
			<input type="checkbox" />
		</div>
		<input type="submit" value="Register" />
		<a href="index.html" rel="login" class="linkform">
			You have an account already? Log in here
		</a>
		<div class="clear"></div>
	</div>
</form>

Now we will add the login form. This form is going to be the one shown when the user visits the site. That’s why we will give it another special class “active”:

现在，我们将添加登录表单。 当用户访问该网站时，将显示此表单。 这就是为什么我们要给它另一个特殊的类“ active”：

<form class="login active">
	<h3>Login</h3>
	<div>
		<label>Username:</label>
		<input type="text" />
	</div>
	<div>
		<label>Password: 
			<a href="forgot_password.html" rel="forgot_password" class="forgot linkform">
				Forgot your password?
			</a>
		</label>
		<input type="password" />
	</div>
	<div class="bottom">
		<div class="remember"><input type="checkbox" />
			<span>Keep me logged in</span>
		</div>
		<input type="submit" value="Login"></input>
		<a href="register.html" rel="register" class="linkform">
			You don't have an account yet? Register here
		</a>
		<div class="clear"></div>
	</div>
</form>

And finally, we will add the password reminder form:

最后，我们将添加密码提醒表单：

<form class="forgot_password">
	<h3>Forgot Password</h3>
	<div>
		<label>Username or Email:</label>
		<input type="text" />
	</div>
	<div class="bottom">
		<input type="submit" value="Send reminder"></input>
		<a href="index.html" rel="login" class="linkform">
			Suddenly remebered? Log in here
		</a>
		<a href="register.html" rel="register" class="linkform">
			You don't have an account? Register here
		</a>
		<div class="clear"></div>
	</div>
</form>

The link elements that point to another form will all share the class “linkform” and in order for us to know which form to show when a user clicks the link, we will add the reference into the “rel” attribute. For example, the link “You don’t have an account? Register here” will have a rel attribute value of “register” since we want to show the registration form when we click on the link.

指向另一种形式的链接元素都将共享“ linkform”类，并且为了使我们知道用户单击链接时要显示哪种形式，我们将引用添加到“ rel”属性中。 例如，链接“您没有帐户？ “在此处注册”将具有rel属性值“注册”，因为我们希望在单击链接时显示注册表格。

As you might have noticed, the “href” attribute will point to the static HTML page with the respective form. The link from the previous example will point to the index.html which contains our login form. This link will come into use, when JavaScript is disabled.

您可能已经注意到，“ href”属性将指向具有相应表单的静态HTML页面。 上一个示例的链接将指向index.html，其中包含我们的登录表单。 禁用JavaScript时，将使用此链接。

Now, let’s spice these forms up using some neat CSS3 properties.

现在，让我们使用一些简洁CSS3属性为这些表单添加趣味。

CSS (The CSS)

Let’s start with the form wrapper. We will give it a white background color, which will be the color we see, when the form is switching:

让我们从表单包装器开始。 我们将给它一个白色背景色，即在切换表单时我们看到的颜色：

.form_wrapper{
	background:#fff;
	border:1px solid #ddd;
	margin:0 auto;
	width:350px;
	font-size:16px;
	-moz-box-shadow:1px 1px 7px #ccc;
	-webkit-box-shadow:1px 1px 7px #ccc;
	box-shadow:1px 1px 7px #ccc;
}

The heading of each form will have the following style:

每个表单的标题将具有以下样式：

.form_wrapper h3{
	padding:20px 30px 20px 30px;
	background-color:#444;
	color:#fff;
	font-size:25px;
	border-bottom:1px solid #ddd;
}

We want the forms not be displayed initially, but we will add a class that tells us that the form is active and should be visible:

我们希望表单最初不显示，但是我们将添加一个类，该类告诉我们表单是活动的并且应该可见：

.form_wrapper form{
	display:none;
	background:#fff;
}
form.active{
	display:block;
}

We will define now the width for each form. In our JavaScript function we will animate the form wrapper to the respective dimension:

现在，我们将定义每种形式的宽度。 在我们JavaScript函数中，我们将使表单包装器动画化为相应的尺寸：

form.login{
	width:350px;
}
form.register{
	width:550px;
}
form.forgot_password{
	width:300px;
}

The columns in the registration form will be floating next to each other:

注册表单中的各列将彼此相邻浮动：

.form_wrapper .column{
	width:47%;
	float:left;
}

The links in all our forms will have the following style:

我们所有形式的链接将具有以下样式：

.form_wrapper a{
	text-decoration:none;
	color:#777;
	font-size:12px;
}
.form_wrapper a:hover{
	color:#000;
}

Label elements have an inline style by default. We want our labels to be block elements:

标签元素默认具有内联样式。 我们希望我们的标签成为块元素：

.form_wrapper label{
	display:block;
	padding:10px 30px 0px 30px;
	margin:10px 0px 0px 0px;
}

We will style the inputs with some nice CSS3 properties, giving them a gradient as background and some neat box shadow:

我们将使用一些不错CSS3属性设置输入的样式，为它们提供渐变作为背景和一些整洁的框阴影：

.form_wrapper input[type="text"],
.form_wrapper input[type="password"]{
	border: solid 1px #E5E5E5;
	margin: 5px 30px 0px 30px;
	padding: 9px;
	display:block;
	font-size:16px;
	width:76%;
	background: #FFFFFF;
	background: 
		-webkit-gradient(
			linear, 
			left top, 
			left 25, 
			from(#FFFFFF), 
			color-stop(4%, #EEEEEE), 
			to(#FFFFFF)
		);
	background: 
		-moz-linear-gradient(
			top, 
			#FFFFFF,
			#EEEEEE 1px, 
			#FFFFFF 25px
			);
	-moz-box-shadow: 0px 0px 8px #f0f0f0;
	-webkit-box-shadow: 0px 0px 8px #f0f0f0;
	box-shadow: 0px 0px 8px #f0f0f0;
}
.form_wrapper input[type="text"]:focus,
.form_wrapper input[type="password"]:focus{
	background:#feffef;
}

The bottom part of each form will be similar to the heading background:

每个表单的底部将类似于标题背景：

.form_wrapper .bottom{
	background-color:#444;
	border-top:1px solid #ddd;
	margin-top:20px;
	clear:both;
	color:#fff;
	text-shadow:1px 1px 1px #000;
}

The link elements will have the following style:

链接元素将具有以下样式：

.form_wrapper .bottom a{
	display:block;
	clear:both;
	padding:10px 30px;
	text-align:right;
	color:#ffa800;
	text-shadow:1px 1px 1px #000;
}
.form_wrapper a.forgot{
	float:right;
	font-style:italic;
	line-height:24px;
	color:#ffa800;
	text-shadow:1px 1px 1px #fff;
}
.form_wrapper a.forgot:hover{
	color:#000;
}

We will make the wrapper for the remember me checkbox float:

我们将使“记住我”复选框的包装器浮动：

.form_wrapper div.remember{
	float:left;
	width:140px;
	margin:20px 0px 20px 30px;
	font-size:11px;
}
.form_wrapper div.remember input{
	float:left;
	margin:2px 5px 0px 0px;
}

The submit button will have a very subtle inset shadow, nothing special:

提交按钮将具有非常微妙的插入阴影，没有什么特别的：

.form_wrapper input[type="submit"] {
	background: #e3e3e3;
	border: 1px solid #ccc;
	color: #333;
	font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
	font-size: 14px;
	font-weight: bold;
	padding: 8px 0 9px;
	text-align: center;
	width: 150px;
	cursor:pointer;
	float:right;
	margin:15px 20px 10px 10px;
	text-shadow: 0 1px 0px #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0px 0px 2px #fff inset;
	-webkit-box-shadow: 0px 0px 2px #fff inset;
	box-shadow: 0px 0px 2px #fff inset;
}
.form_wrapper input[type="submit"]:hover {
	background: #d9d9d9;
	-moz-box-shadow: 0px 0px 2px #eaeaea inset;
	-webkit-box-shadow: 0px 0px 2px #eaeaea inset;
	box-shadow: 0px 0px 2px #eaeaea inset;
	color: #222;
}

And that’s all the style! Let’s add some Rock’n Roll with jQuery!

这就是所有样式！ 让我们用jQuery添加一些摇滚乐！

JavaScript (The JavaScript)

The idea is to animate to the size of the new form and to switch to it, i.e. show it. So, first we will cache some elements:

这个想法是为新表格的大小设置动画，并切换到新表格，即显示它。 因此，首先我们将缓存一些元素：

//the form wrapper (includes all forms)
var $form_wrapper	= $('#form_wrapper'),

//the current form is the one with class "active"
$currentForm	= $form_wrapper.children('form.active'),
	
//the switch form links
$linkform		= $form_wrapper.find('.linkform');

We’ll get the width and height of each form to store it for later when we want to animate to it:

我们将获得每个表单的宽度和高度，以存储它，以便以后为它们添加动画时：

							
$form_wrapper.children('form').each(function(i){
	var $theForm	= $(this);
	//solve the inline display none problem when using fadeIn/fadeOut
	if(!$theForm.hasClass('active'))
		$theForm.hide();
	$theForm.data({
		width	: $theForm.width(),
		height	: $theForm.height()
	});
});

Now, we will call the function that sets the dimension of the wrapper to the one of the current form:

现在，我们将调用将包装器尺寸设置为当前形式之一的函数：

setWrapperWidth();

When we click a “switch link”, we want to hide the current form, since we know that we’ll switch to another one. We’ll animate the form wrapper’s width and height to the width and height of the new form. After the animation is done, we show the new form:

当我们单击“切换链接”时，我们想隐藏当前表单，因为我们知道将切换到另一表单。 我们将表格包装器的宽度和高度设置为新表格的宽度和高度的动画。 动画完成后，我们显示新的表单：

$linkform.bind('click',function(e){
	var $link	= $(this);
	var target	= $link.attr('rel');
	$currentForm.fadeOut(400,function(){
		//remove class "active" from current form
		$currentForm.removeClass('active');
		//new current form
		$currentForm= $form_wrapper.children('form.'+target);
		//animate the wrapper
		$form_wrapper.stop()
					 .animate({
						width	: $currentForm.data('width') + 'px',
						height	: $currentForm.data('height') + 'px'
					 },500,function(){
						//new form gets class "active"
						$currentForm.addClass('active');
						//show the new form
						$currentForm.fadeIn(400);
					 });
	});
	e.preventDefault();
});

The function that sets the width to the wrapper simply sets its css properties. We want to ensure that the wrapper has the right width and height set when we load the page.

设置包装器宽度的函数仅设置其css属性。 我们要确保在加载页面时包装器的宽度和高度设置正确。

function setWrapperWidth(){
	$form_wrapper.css({
		width	: $currentForm.data('width') + 'px',
		height	: $currentForm.data('height') + 'px'
	});
}

For the demo we disabled the submit buttons. If you use them, you will need to check which form is being submitted and give the class “active” to the form you want to switch to, i.e. show:

对于演示，我们禁用了提交按钮。 如果使用它们，则需要检查正在提交的表单，并为要切换到的表单提供“活动”类，即显示：

$form_wrapper.find('input[type="submit"]')
			 .click(function(e){
				e.preventDefault();
			 });	

And that’s it! We really hope you enjoyed the tutorial and find it useful!

就是这样！ 我们真的希望您喜欢本教程并发现它有用！

翻译自: https://tympanus.net/codrops/2011/01/06/animated-form-switching/

jquery切换动画