jQuery表单动画切换效果.zip资源-CSDN文库

共9个文件

html：3个

js：2个

gif：1个

版权申诉

javascript

jQuery

html5

166 浏览量 2022-11-19 19:49:45 上传评论收藏 150KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery表单动画切换效果.zip （9个子文件）

jQuery表单动画切换效果

AnimatedFormSwitching

css

style.css 4KB

images

bg.gif 65B

Thumbs.db 12KB

forgot_password.html 7KB

index.html 7KB

cufon-yui.js 18KB

ChunkFive_400.font.js 16KB

jQuery表单动画切换效果.jpg 142KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Animated Form Switching with jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Expand, contract, animate forms with jQuery wihtout leaving the page" /> <meta name="keywords" content="expand, form, css3, jquery, animate, width, height, adapt, unobtrusive javascript"/> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/cufon-yui.js" type="text/javascript"></script> <script src="js/ChunkFive_400.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1',{ textShadow: '1px 1px #fff'}); Cufon.replace('h2',{ textShadow: '1px 1px #fff'}); Cufon.replace('h3',{ textShadow: '1px 1px #000'}); Cufon.replace('.back'); </script> </head> <body> <div class="wrapper"> <h1>Animated Form Switching</h1> <h2>Demo: click the <span>orange links</span> to see the form animating and switching</h2> <div class="content"> <div id="form_wrapper" class="form_wrapper"> <form class="register"> <h3>Register</h3> <div class="column"> <div> <label>First Name:</label> <input type="text" /> <span class="error">This is an error</span> </div> <div> <label>Last Name:</label> <input type="text" /> <span class="error">This is an error</span> </div> <div> <label>Website:</label> <input type="text" value="http://"/> <span class="error">This is an error</span> </div> </div> <div class="column"> <div> <label>Username:</label> <input type="text"/> <span class="error">This is an error</span> </div> <div> <label>Email:</label> <input type="text" /> <span class="error">This is an error</span> </div> <div> <label>Password:</label> <input type="password" /> <span class="error">This is an error</span> </div> </div> <div class="bottom"> <div class="remember"> <input type="checkbox" /> <span>Send me updates</span> </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> <form class="login active"> <h3>Login</h3> <div> <label>Username:</label> <input type="text" /> <span class="error">This is an error</span> </div> <div> <label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Forgot your password?</a></label> <input type="password" /> <span class="error">This is an error</span> </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> <form class="forgot_password"> <h3>Forgot Password</h3> <div> <label>Username or Email:</label> <input type="text" /> <span class="error">This is an error</span> </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> </div> <div class="clear"></div> </div> <a class="back" href="http://tympanus.net/codrops/2011/01/06/animated-form-switching/">back to the Codrops tutorial</a> </div>  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { //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 change form links $linkform = $form_wrapper.find('.linkform'); //get width and height of each form and store them for later $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() }); }); //set width and height of wrapper (same of current form) setWrapperWidth(); /* clicking a link (change form event) in the form makes the current form hide. The wrapper animates its width and height to the width and height of the new current form. After the animation, the new form is shown */ $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(); }); 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 submit the form, you need to check the which form was submited, and give the class active to the form you want to show */ $form_wrapper.find('input[type="submit"]') .click(function(e){ e.preventDefault(); }); }); </script> </body> </html>

评论收藏

内容反馈

版权申诉